├── .babelrc ├── .gitignore ├── .npmignore ├── README.md ├── babel.config.cjs ├── docs ├── .vuepress │ ├── config.js │ ├── dist │ │ ├── 404.html │ │ ├── assets │ │ │ ├── css │ │ │ │ └── 0.styles.88353a76.css │ │ │ ├── fonts │ │ │ │ └── 江西拙楷.307fbef9.ttf │ │ │ ├── img │ │ │ │ ├── emui-add-blue-style1.c4f136ba.svg │ │ │ │ ├── emui-add-blue-style2.2647246d.svg │ │ │ │ ├── emui-add-red-style1.42427b5b.svg │ │ │ │ ├── emui-add-red-style2.6a05c4f0.svg │ │ │ │ ├── emui-address-blue-style1.7b64f0c6.svg │ │ │ │ ├── emui-address-blue-style2.d60e450b.svg │ │ │ │ ├── emui-address-red-style1.4fda0c0d.svg │ │ │ │ ├── emui-address-red-style2.842f5984.svg │ │ │ │ ├── emui-arrow-bottom.ef694690.svg │ │ │ │ ├── emui-arrow-left.5171f56c.svg │ │ │ │ ├── emui-arrow-right.2afa73b8.svg │ │ │ │ ├── emui-arrow-top.f466e370.svg │ │ │ │ ├── emui-custom-blue-style1.429152a6.svg │ │ │ │ ├── emui-custom-blue-style2.0a7c0825.svg │ │ │ │ ├── emui-custom-red-style1.96582d6b.svg │ │ │ │ ├── emui-custom-red-style2.05610453.svg │ │ │ │ ├── emui-delete-blue-style1.193ddd31.svg │ │ │ │ ├── emui-delete-blue-style2.78bcd17b.svg │ │ │ │ ├── emui-delete-red-style1.d5f6e29b.svg │ │ │ │ ├── emui-delete-red-style2.bd8705ac.svg │ │ │ │ ├── emui-home-blue-style1.568895ec.svg │ │ │ │ ├── emui-home-blue-style2.f1b09fd3.svg │ │ │ │ ├── emui-home-red-style1.3910d1cd.svg │ │ │ │ ├── emui-home-red-style2.8f3882d2.svg │ │ │ │ ├── emui-info-blue-style1.31172cec.svg │ │ │ │ ├── emui-info-blue-style2.3e8d41de.svg │ │ │ │ ├── emui-info-red-style1.df7387cc.svg │ │ │ │ ├── emui-info-red-style2.dba9b835.svg │ │ │ │ ├── emui-message-blue-style1.93e22936.svg │ │ │ │ ├── emui-message-blue-style2.931ad8a0.svg │ │ │ │ ├── emui-message-red-style1.67330628.svg │ │ │ │ ├── emui-message-red-style2.6eae51eb.svg │ │ │ │ ├── emui-refresh-blue-style1.cc0fe743.svg │ │ │ │ ├── emui-refresh-blue-style2.8ba9998e.svg │ │ │ │ ├── emui-refresh-red-style1.835be437.svg │ │ │ │ ├── emui-refresh-red-style2.158f3f6a.svg │ │ │ │ ├── emui-return-blue-style1.36e16e4e.svg │ │ │ │ ├── emui-return-blue-style2 (1).36e16e4e.svg │ │ │ │ ├── emui-return-blue-style2.2c8c4772.svg │ │ │ │ ├── emui-return-red-style1.eaf08bae.svg │ │ │ │ ├── emui-return-red-style2.22cadd63.svg │ │ │ │ ├── emui-search-blue-style1.a78a1f9a.svg │ │ │ │ ├── emui-search-blue-style2.c88c1643.svg │ │ │ │ ├── emui-search-red-style1.323129d6.svg │ │ │ │ ├── emui-search-red-style2.93c20163.svg │ │ │ │ ├── emui-seeting-blue-style1.e064dffe.svg │ │ │ │ ├── emui-seeting-blue-style2.945c332a.svg │ │ │ │ ├── emui-seeting-red-style1.c328c3fb.svg │ │ │ │ ├── emui-seeting-red-style2.774bcac3.svg │ │ │ │ ├── emui-share-blue-style1.3b3998ef.svg │ │ │ │ ├── emui-share-blue-style2.da3e2417.svg │ │ │ │ ├── emui-share-red-style1.11d1f524.svg │ │ │ │ ├── emui-share-red-style2.89d5a937.svg │ │ │ │ ├── emui-star-blue-style1.7cfb4fa3.svg │ │ │ │ ├── emui-star-blue-style2.2caaa43e.svg │ │ │ │ ├── emui-star-red-style1.19e148b3.svg │ │ │ │ ├── emui-star-red-style2.ce3ac247.svg │ │ │ │ └── search.83621669.svg │ │ │ └── js │ │ │ │ ├── 10.144d1d22.js │ │ │ │ ├── 11.fbb54022.js │ │ │ │ ├── 12.6db5b26b.js │ │ │ │ ├── 13.d8087cbe.js │ │ │ │ ├── 14.93c079d9.js │ │ │ │ ├── 15.5bf58fcd.js │ │ │ │ ├── 16.ac8cb0be.js │ │ │ │ ├── 17.351e0c82.js │ │ │ │ ├── 18.e3ed527b.js │ │ │ │ ├── 19.40e245a1.js │ │ │ │ ├── 2.10252582.js │ │ │ │ ├── 20.474db5a8.js │ │ │ │ ├── 21.8edd940f.js │ │ │ │ ├── 22.a6ae813e.js │ │ │ │ ├── 23.dce4f503.js │ │ │ │ ├── 24.a9aff1ed.js │ │ │ │ ├── 25.980b9d5c.js │ │ │ │ ├── 26.e7a3f0ca.js │ │ │ │ ├── 27.ea31e305.js │ │ │ │ ├── 3.116eb987.js │ │ │ │ ├── 4.22171950.js │ │ │ │ ├── 5.0ce5907f.js │ │ │ │ ├── 6.599e06a6.js │ │ │ │ ├── 7.6e91b048.js │ │ │ │ ├── 8.a92ec037.js │ │ │ │ ├── 9.1be08791.js │ │ │ │ └── app.24daf3d7.js │ │ ├── comps │ │ │ ├── basic │ │ │ │ ├── button.html │ │ │ │ ├── dialog.html │ │ │ │ ├── icon.html │ │ │ │ ├── link.html │ │ │ │ ├── message.html │ │ │ │ ├── switch.html │ │ │ │ └── tag.html │ │ │ ├── form │ │ │ │ ├── checkbox.html │ │ │ │ ├── form.html │ │ │ │ ├── input.html │ │ │ │ ├── radio.html │ │ │ │ └── select.html │ │ │ ├── navigation │ │ │ │ ├── nav.html │ │ │ │ ├── navItem.html │ │ │ │ └── subnav.html │ │ │ └── table │ │ │ │ └── table.html │ │ ├── guide │ │ │ ├── guide.html │ │ │ └── introduction.html │ │ ├── image │ │ │ ├── 11.png │ │ │ └── logo.png │ │ └── index.html │ ├── enhanceApp.js │ ├── public │ │ └── image │ │ │ ├── 11.png │ │ │ └── logo.png │ └── styles │ │ └── palette.styl ├── README.md ├── comps │ ├── basic │ │ ├── button.md │ │ ├── dialog.md │ │ ├── icon.md │ │ ├── link.md │ │ ├── message.md │ │ ├── switch.md │ │ └── tag.md │ ├── form │ │ ├── checkbox.md │ │ ├── form.md │ │ ├── input.md │ │ ├── radio.md │ │ └── select.md │ ├── navigation │ │ ├── nav.md │ │ ├── navItem.md │ │ └── subnav.md │ └── table │ │ └── table.md └── guide │ ├── guide.md │ └── introduction.md ├── jest.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── public └── index.html ├── rollup.config.js ├── scripts └── deploy-gh.sh ├── serverless.yml ├── src ├── assets │ ├── font │ │ ├── font.scss │ │ └── 江西拙楷.ttf │ ├── icon │ │ ├── emui-add-blue-style1.svg │ │ ├── emui-add-blue-style2.svg │ │ ├── emui-add-red-style1.svg │ │ ├── emui-add-red-style2.svg │ │ ├── emui-address-blue-style1.svg │ │ ├── emui-address-blue-style2.svg │ │ ├── emui-address-red-style1.svg │ │ ├── emui-address-red-style2.svg │ │ ├── emui-arrow-bottom.svg │ │ ├── emui-arrow-left.svg │ │ ├── emui-arrow-right.svg │ │ ├── emui-arrow-top.svg │ │ ├── emui-custom-blue-style1.svg │ │ ├── emui-custom-blue-style2.svg │ │ ├── emui-custom-red-style1.svg │ │ ├── emui-custom-red-style2.svg │ │ ├── emui-delete-blue-style1.svg │ │ ├── emui-delete-blue-style2.svg │ │ ├── emui-delete-red-style1.svg │ │ ├── emui-delete-red-style2.svg │ │ ├── emui-home-blue-style1.svg │ │ ├── emui-home-blue-style2.svg │ │ ├── emui-home-red-style1.svg │ │ ├── emui-home-red-style2.svg │ │ ├── emui-info-blue-style1.svg │ │ ├── emui-info-blue-style2.svg │ │ ├── emui-info-red-style1.svg │ │ ├── emui-info-red-style2.svg │ │ ├── emui-message-blue-style1.svg │ │ ├── emui-message-blue-style2.svg │ │ ├── emui-message-red-style1.svg │ │ ├── emui-message-red-style2.svg │ │ ├── emui-refresh-blue-style1.svg │ │ ├── emui-refresh-blue-style2.svg │ │ ├── emui-refresh-red-style1.svg │ │ ├── emui-refresh-red-style2.svg │ │ ├── emui-return-blue-style1.svg │ │ ├── emui-return-blue-style2 (1).svg │ │ ├── emui-return-blue-style2.svg │ │ ├── emui-return-red-style1.svg │ │ ├── emui-return-red-style2.svg │ │ ├── emui-search-blue-style1.svg │ │ ├── emui-search-blue-style2.svg │ │ ├── emui-search-red-style1.svg │ │ ├── emui-search-red-style2.svg │ │ ├── emui-seeting-blue-style1.svg │ │ ├── emui-seeting-blue-style2.svg │ │ ├── emui-seeting-red-style1.svg │ │ ├── emui-seeting-red-style2.svg │ │ ├── emui-share-blue-style1.svg │ │ ├── emui-share-blue-style2.svg │ │ ├── emui-share-red-style1.svg │ │ ├── emui-share-red-style2.svg │ │ ├── emui-star-blue-style1.svg │ │ ├── emui-star-blue-style2.svg │ │ ├── emui-star-red-style1.svg │ │ ├── emui-star-red-style2.svg │ │ └── 搜索组件 (3).zip │ └── iconfont │ │ ├── iconfont.css │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 ├── components │ ├── Button │ │ ├── button.vue │ │ └── index.js │ ├── CheckBox │ │ ├── checkbox.vue │ │ ├── checkboxGroup.vue │ │ └── index.js │ ├── Form │ │ ├── form.vue │ │ ├── formItem.vue │ │ └── index.js │ ├── Icon │ │ ├── dist │ │ │ └── index.dev.js │ │ ├── icon.js │ │ ├── icon.vue │ │ └── index.js │ ├── Input │ │ ├── index.js │ │ └── input.vue │ ├── Link │ │ ├── index.js │ │ └── link.vue │ ├── Message │ │ ├── MyMessage.vue │ │ └── index.js │ ├── Nav │ │ ├── click-outside.js │ │ ├── index.js │ │ ├── nav-item.vue │ │ ├── nav.vue │ │ └── sub-nav.vue │ ├── Radio │ │ ├── RadioButton.vue │ │ ├── RadioGroup.vue │ │ ├── index.js │ │ └── radio.vue │ ├── Select │ │ ├── index.js │ │ ├── option.vue │ │ └── select.vue │ ├── Switch │ │ ├── Switch.vue │ │ └── index.js │ ├── Table │ │ ├── index.js │ │ └── table.vue │ ├── Tag │ │ ├── index.js │ │ ├── tag.vue │ │ └── tagList.vue │ ├── dialog │ │ ├── dialog.vue │ │ └── index.js │ └── progress │ │ └── ProGress.vue ├── dist │ └── index.dev.js ├── index.js ├── mixins │ └── emitter.js ├── styles │ ├── button.scss │ ├── checkbox.scss │ ├── common │ │ └── scss │ │ │ ├── animation.scss │ │ │ ├── color.scss │ │ │ └── font.scss │ ├── dialog.scss │ ├── icon.scss │ ├── index.scss │ ├── input.scss │ ├── link.scss │ ├── message.scss │ ├── message.scss.rej │ ├── nav.scss │ ├── navitem.scss │ ├── progress.scss │ ├── radio.scss │ ├── select.scss │ ├── subnav.scss │ ├── table.scss │ ├── tag.scss │ └── totalnav.scss └── utils │ └── checkone.js ├── tests └── unit │ ├── button.spec.js │ ├── checkbox.spec.js │ ├── dialog.spec.js │ ├── icon.spec.js │ ├── input.spec.js │ ├── link.spec.js │ ├── nav.spec.js │ ├── radio.spec.js │ ├── select.spec.js │ └── switch.spec.js ├── vue.config.js ├── 使用文档.md └── 使用文档.txt /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env" 5 | ] 6 | ], 7 | "env": { 8 | "test": { 9 | "plugins": ["transform-require-context"] 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | src/ 3 | public/ 4 | docs/ 5 | tests/ 6 | 7 | # 忽略指定文件 8 | vue.config.js 9 | babel.config.js 10 | *.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 项目说明 2 | 3 | gZxfp.png 4 | 5 | # Emui中国风ui组件库 6 | ## 文档地址：https://hasmokan.github.io/component-system/ 7 |
8 | 9 | > 这个基于 Vue2.x 开发的中国风组件库，提供了一系列高质量的中国风 UI 组件，可帮助您轻松地为您的网站或应用程序添加中国文化元素。不仅包括常见的基础组件，还有一些特殊的中国风样式和交互，可以让您的网站或应用程序更具特色和吸引力。同时，这个组件库也提供了完整的文档和示例代码，方便您快速上手，轻松应用。 10 | 11 | # 安装 12 | 13 | ## npm安装 14 | 15 | 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 16 | 17 | ``` 18 | npm i ema-ui -S 19 | ``` 20 | ## 引入Ema-UI 21 | 你可以引入整个 Ema-UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Ema-UI。 22 | 23 | ### 完整引入 24 | 在 main.js 中写入以下内容： 25 | ```js 26 | import emui from 'ema-ui' 27 | import "ema-ui/dist/css/index.css" 28 | Vue.use(emui) 29 | ``` 30 | ### 按需引入 31 | 在 main.js 中写入以下内容： 32 | ```js 33 | import {Input,Radio} from 'ema-ui' 34 | import "ema-ui/dist/css/index.css" 35 | Vue.use(Input) 36 | Vue.use(Radio) 37 | ``` 38 | ### 完整组件列表和引入方式 39 | ```js 40 | Vue.use(Input) 41 | Vue.use(Radio) 42 | Vue.use(RadioButton) 43 | Vue.use(RadioGroup) 44 | Vue.use(Checkbox) 45 | Vue.use(CheckboxGroup) 46 | Vue.use(Form) 47 | Vue.use(FormItem) 48 | Vue.use(Button) 49 | Vue.use(Select) 50 | Vue.use(Option) 51 | Vue.use(Table) 52 | Vue.use(Nav) 53 | Vue.use(NavItem) 54 | Vue.use(Subnav) 55 | Vue.use(Dialog) 56 | Vue.use(Icon) 57 | Vue.use(Link) 58 | Vue.use(Tag) 59 | Vue.use(TagList) 60 | Vue.use(Switcher) 61 | Vue.prototype.$notice = Message; 62 | ``` 63 | -------------------------------------------------------------------------------- /babel.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: '', 3 | title: 'Emui', 4 | description: '中国风ui组件库', 5 | base: '/component-system/', 6 | port: '8080', 7 | chainWebpack: config => { 8 | config.resolve.alias.set('core-js/library/fn', 'core-js/features') 9 | }, 10 | markdown: { 11 | lineNumbers: true 12 | }, 13 | plugins: ['demo-container'], 14 | themeConfig: { 15 | sidebarDepth: 1, 16 | nav: [ 17 | { 18 | text: '首页', 19 | link: '/' 20 | }, 21 | { 22 | text: '指南', 23 | link: '/guide/introduction' 24 | }, 25 | { 26 | text: '组件', 27 | link: '/comps/basic/button' 28 | } 29 | ], 30 | sidebar: { 31 | '/comps/': [ 32 | { 33 | title: 'Basic基础组件', 34 | collapsable: false, 35 | children: [ 36 | 'basic/button', 37 | 'basic/dialog', 38 | 'basic/switch', 39 | 'basic/link', 40 | 'basic/icon', 41 | 'basic/tag', 42 | 'basic/message' 43 | ] 44 | }, 45 | { 46 | title: 'Navigation导航', 47 | collapsable: false, 48 | children: [ 49 | 'navigation/nav', 50 | 'navigation/subnav', 51 | 'navigation/navItem', 52 | ] 53 | }, 54 | { 55 | title: 'Form表单', 56 | collapsable: false, 57 | children: [ 58 | 'form/form', 59 | 'form/input', 60 | 'form/radio', 61 | 'form/checkbox', 62 | 'form/select' 63 | ] 64 | }, 65 | { 66 | title: 'Table表格', 67 | collapsable: false, 68 | children: ['table/table'] 69 | } 70 | ], 71 | '/guide/': [ 72 | { 73 | title: '开发指南', 74 | collapsable: false, 75 | children: [ 76 | 'introduction', 77 | 'guide', 78 | ] 79 | }, 80 | ] 81 | } 82 | }, 83 | } -------------------------------------------------------------------------------- /docs/.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Emui 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

404

How did we get here?
16 | Take me home. 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/fonts/江西拙楷.307fbef9.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/docs/.vuepress/dist/assets/fonts/江西拙楷.307fbef9.ttf -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/emui-arrow-bottom.ef694690.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/emui-arrow-left.5171f56c.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/emui-arrow-right.2afa73b8.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/emui-arrow-top.f466e370.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/14.93c079d9.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{357:function(t,a,s){"use strict";s.r(a);var n={name:"component-doc",components:{"render-demo-0":{render:function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("div",{attrs:{id:"app"}},[s("emui-switch",{attrs:{name:"12"},model:{value:t.active1,callback:function(a){t.active1=a},expression:"active1"}}),t._v(" "),s("emui-switch",{attrs:{name:"11",activeColor:"red",inactiveColor:"green"},model:{value:t.active2,callback:function(a){t.active2=a},expression:"active2"}})],1)]],2)},staticRenderFns:[],name:"App",data:()=>({active1:!1,active2:!1})}}},e=s(11),r=Object(e.a)(n,(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用"}},[t._v("#")]),t._v(" 使用")]),t._v(" "),a("blockquote",[a("p",[t._v("你可以通过设置"),a("code",[t._v("v-model")]),t._v("来达到独立控制开关，或者控制开关的状态，"),a("code",[t._v("activeColor")]),t._v(" "),a("code",[t._v("inactiveColor")]),t._v("分别控制开启和关闭的颜色")])]),t._v(" "),a("demo-block",{attrs:{options:JSON.parse(decodeURI("%7B%7D"))}},[a("template",{slot:"demo"},[[a("render-demo-0")]],2),t._v(" "),a("template",{slot:"source"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("emui-switch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("12"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("active1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("emui-switch")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("11"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("active2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("activeColor")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("inactiveColor")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"App"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active1")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active2")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br"),a("span",{staticClass:"line-number"},[t._v("19")]),a("br"),a("span",{staticClass:"line-number"},[t._v("20")]),a("br"),a("span",{staticClass:"line-number"},[t._v("21")]),a("br"),a("span",{staticClass:"line-number"},[t._v("22")]),a("br"),a("span",{staticClass:"line-number"},[t._v("23")]),a("br"),a("span",{staticClass:"line-number"},[t._v("24")]),a("br")])])])],2),a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),a("h3",{attrs:{id:"_1、switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、switch"}},[t._v("#")]),t._v(" 1、switch")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("属性值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("v-model")]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("switch 绑定的对象值")])]),t._v(" "),a("tr",[a("td",[t._v("activeColor")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("激活的颜色")])]),t._v(" "),a("tr",[a("td",[t._v("inactiveColor")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("没激活的颜色")])]),t._v(" "),a("tr",[a("td",[t._v("name")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("名字")])])])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/22.a6ae813e.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[22],{353:function(t,a,s){"use strict";s.r(a);var n={name:"component-doc",components:{"render-demo-0":{render:function(){var t=this.$createElement,a=this._self._c||t;return a("div",[a("emui-nav-item",{attrs:{name:"hire"}},[this._v("测试")])],1)},staticRenderFns:[],name:"App",data:()=>({selected:["culture"]})}}},e=s(11),r=Object(e.a)(n,(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用"}},[t._v("#")]),t._v(" 使用")]),t._v(" "),a("blockquote",[a("p",[t._v("我们还可以通过"),a("code",[t._v("emui-nav-item")]),t._v("填充 nav")])]),t._v(" "),a("demo-block",{attrs:{options:JSON.parse(decodeURI("%7B%7D"))}},[a("template",{slot:"demo"},[[a("render-demo-0")]],2),t._v(" "),a("template",{slot:"source"},[a("div",{staticClass:"language-html line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("emui-nav-item")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("hire"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("测试"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"App"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("selected")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"culture"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br")])])])],2),a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),a("h3",{attrs:{id:"_1、nav"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、nav"}},[t._v("#")]),t._v(" 1、nav")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("属性值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("selectd")]),t._v(" "),a("td",[t._v("Array")]),t._v(" "),a("td",[t._v("数组")])])])]),t._v(" "),a("h3",{attrs:{id:"_2、sub-nav"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、sub-nav"}},[t._v("#")]),t._v(" 2、sub-nav")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("属性值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("子导航的标题")])])])]),t._v(" "),a("h3",{attrs:{id:"_2、nav-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、nav-item"}},[t._v("#")]),t._v(" 2、nav-item")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("属性值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("name")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("标题的 name 以设置激活 item")])])])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/26.e7a3f0ca.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[26],{363:function(t,s,e){"use strict";e.r(s);var n=e(11),r=Object(n.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"简介"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#简介"}},[this._v("#")]),this._v(" 简介")]),this._v(" "),t("blockquote",[t("p",[this._v("这个基于 Vue2.x 开发的中国风组件库，提供了一系列高质量的中国风 UI 组件，可帮助您轻松地为您的网站或应用程序添加中国文化元素。不仅包括常见的基础组件，还有一些特殊的中国风样式和交互，可以让您的网站或应用程序更具特色和吸引力。同时，这个组件库也提供了完整的文档和示例代码，方便您快速上手，轻松应用。")])])])}),[],!1,null,null,null);s.default=r.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/27.ea31e305.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[27],{279:function(e,s,u){var t={"./emui-add-blue-style1.svg":280,"./emui-add-blue-style2.svg":281,"./emui-add-red-style1.svg":282,"./emui-add-red-style2.svg":283,"./emui-address-blue-style1.svg":284,"./emui-address-blue-style2.svg":285,"./emui-address-red-style1.svg":286,"./emui-address-red-style2.svg":287,"./emui-arrow-bottom.svg":288,"./emui-arrow-left.svg":289,"./emui-arrow-right.svg":290,"./emui-arrow-top.svg":291,"./emui-custom-blue-style1.svg":292,"./emui-custom-blue-style2.svg":293,"./emui-custom-red-style1.svg":294,"./emui-custom-red-style2.svg":295,"./emui-delete-blue-style1.svg":296,"./emui-delete-blue-style2.svg":297,"./emui-delete-red-style1.svg":298,"./emui-delete-red-style2.svg":299,"./emui-home-blue-style1.svg":300,"./emui-home-blue-style2.svg":301,"./emui-home-red-style1.svg":302,"./emui-home-red-style2.svg":303,"./emui-info-blue-style1.svg":304,"./emui-info-blue-style2.svg":305,"./emui-info-red-style1.svg":306,"./emui-info-red-style2.svg":307,"./emui-message-blue-style1.svg":308,"./emui-message-blue-style2.svg":309,"./emui-message-red-style1.svg":310,"./emui-message-red-style2.svg":311,"./emui-refresh-blue-style1.svg":312,"./emui-refresh-blue-style2.svg":313,"./emui-refresh-red-style1.svg":314,"./emui-refresh-red-style2.svg":315,"./emui-return-blue-style1.svg":316,"./emui-return-blue-style2 (1).svg":317,"./emui-return-blue-style2.svg":318,"./emui-return-red-style1.svg":319,"./emui-return-red-style2.svg":320,"./emui-search-blue-style1.svg":321,"./emui-search-blue-style2.svg":322,"./emui-search-red-style1.svg":323,"./emui-search-red-style2.svg":324,"./emui-seeting-blue-style1.svg":325,"./emui-seeting-blue-style2.svg":326,"./emui-seeting-red-style1.svg":327,"./emui-seeting-red-style2.svg":328,"./emui-share-blue-style1.svg":329,"./emui-share-blue-style2.svg":330,"./emui-share-red-style1.svg":331,"./emui-share-red-style2.svg":332,"./emui-star-blue-style1.svg":333,"./emui-star-blue-style2.svg":334,"./emui-star-red-style1.svg":335,"./emui-star-red-style2.svg":336};function l(e){var s=r(e);return u(s)}function r(e){if(!u.o(t,e)){var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}return t[e]}l.keys=function(){return Object.keys(t)},l.resolve=r,e.exports=l,l.id=279}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/4.22171950.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{258:function(t,e,n){},337:function(t,e,n){"use strict";n(258)},364:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(337),n(11)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/5.0ce5907f.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{259:function(t,e,a){},338:function(t,e,a){"use strict";a(259)},359:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(338),a(11)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/6.599e06a6.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{260:function(e,t,a){},339:function(e,t,a){"use strict";a(260)},360:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(339),a(11)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/7.6e91b048.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{342:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(11),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/8.a92ec037.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{361:function(t,n,s){"use strict";s.r(n);var e=s(11),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[this._v("undefined")])}),[],!1,null,null,null);n.default=o.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/guide/introduction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 简介 | Emui 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Emui

# 简介

这个基于 Vue2.x 开发的中国风组件库，提供了一系列高质量的中国风 UI 组件，可帮助您轻松地为您的网站或应用程序添加中国文化元素。不仅包括常见的基础组件，还有一些特殊的中国风样式和交互，可以让您的网站或应用程序更具特色和吸引力。同时，这个组件库也提供了完整的文档和示例代码，方便您快速上手，轻松应用。

28 | 安装 29 | 30 | → 31 |

32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/image/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/docs/.vuepress/dist/image/11.png -------------------------------------------------------------------------------- /docs/.vuepress/dist/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/docs/.vuepress/dist/image/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Emui 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Emui
hero

28 | Emui 29 |

30 | 中国风ui组件库 31 |

32 | 快速上手 → 33 |

中国风 Chinoiserie

由e码当先为您精心打造的中国风组件库

反馈 Feedback

通过界面样式和交互动效让用户可以清晰的感知自己的操作

效率 Efficiency

界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

undefined
34 | byE码当先 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | 2 | import "ema-ui/dist/css/index.css" 3 | export default ({ 4 | Vue, 5 | options, 6 | router 7 | }) => { 8 | Vue.mixin({ 9 | mounted() { 10 | import ('ema-ui').then(function(emui) { 11 | Vue.use(emui.default) 12 | }) 13 | }, 14 | }) 15 | } -------------------------------------------------------------------------------- /docs/.vuepress/public/image/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/docs/.vuepress/public/image/11.png -------------------------------------------------------------------------------- /docs/.vuepress/public/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/docs/.vuepress/public/image/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #40c1ca -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /image/logo.png 4 | heroText: Emui 5 | actionText: 快速上手 → 6 | actionLink: /comps/basic/button 7 | features: 8 | - title: 中国风 Chinoiserie 9 | details: 由e码当先为您精心打造的中国风组件库 10 | - title: 反馈 Feedback 11 | details: 通过界面样式和交互动效让用户可以清晰的感知自己的操作 12 | - title: 效率 Efficiency 13 | details: 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 14 | footer: byE码当先 15 | --- 16 | -------------------------------------------------------------------------------- /docs/comps/basic/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: button 3 | --- 4 | 5 | ## 使用 6 | 7 | > 最朴实无华的组件，组件库的核心,e 码当先团队为您提供了五种属性选择，供您在各种开发环境下运行，您只需要通过`type`属性来设置 8 | 9 | ### 普通的按钮 10 | 11 | ::: demo 12 | ```html 13 | 取消 14 | 确认 15 | 确认 16 | 测试 17 | 测试 18 | 测试 19 | 测试 20 | 测试 21 | ``` 22 | 23 | ::: 24 | 25 | ### 圆边 26 | 27 | ::: demo 28 | 29 | ```html 30 | 取消 31 | 确认 32 | 确认 33 | 测试 34 | 测试 35 | 测试 36 | 测试 37 | 测试 38 | ``` 39 | 40 | ::: 41 | 42 | ### 朴素 43 | 44 | ::: demo 45 | 46 | ```html 47 | 取消 48 | 确认 49 | 确认 50 | 测试 51 | 测试 52 | 测试 53 | 测试 54 | 测试 55 | ``` 56 | 57 | ::: 58 | 59 | ### 禁用 60 | 61 | ::: demo 62 | 63 | ```html 64 | 取消 65 | 确认 66 | 确认 67 | 测试 68 | 测试 69 | 测试 70 | 测试 71 | 测试 72 | ``` 73 | 74 | ::: 75 | 76 | ### 椭圆 77 | 78 | ::: demo 79 | 80 | ```html 81 | 取消 82 | 确认 83 | 确认 84 | 测试 85 | 测试 86 | 测试 87 | 测试 88 | 测试 89 | ``` 90 | 91 | ::: 92 | 93 | ## Attributes 94 | 95 | ### 1、button 颜色属性 96 | 97 | | 属性 | 属性值 | 说明 | 98 | | ------------ | ------ | ------ | 99 | | default | String | 常规 | 100 | | primarywhite | String | 白字 | 101 | | primarygold | String | 金字 | 102 | | successgold | String | 成功白 | 103 | | successgold | String | 成功金 | 104 | | dangerwhite | String | 危险白 | 105 | | dangergold | String | 危险金 | 106 | 107 | ### 2、button 属性 108 | 109 | | 属性 | 属性值 | 说明 | 110 | | -------- | ------ | -------- | 111 | | default | String | 常规 | 112 | | round | String | 圆边 | 113 | | plain | String | 朴素按钮 | 114 | | disabled | String | 禁止使用 | 115 | | circle | String | 椭圆 | 116 | -------------------------------------------------------------------------------- /docs/comps/basic/dialog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: dialog 3 | --- 4 | 5 | ## 使用 6 | 7 | > 通过与`visiable`绑定我们可以指定事件打开对话框 8 | 9 | > 日常生活中，少不了对话，emui 为您提供了两种对话框，您可以通过`v-slot`填入指定的插槽，实现对话的按钮功能 10 | 11 | ::: demo 日常生活中，少不了对话，emui 为您提供了两种对话框，您可以通过`v-slot`填入指定的插槽，实现对话的按钮功能 12 | 13 | ```html 14 | 31 | 32 | 43 | ``` 44 | 45 | ::: 46 | 47 | 朴实无华的对话 dialog 48 | 49 | ::: demo 朴实无华的对话 dialog 50 | 51 | ```html 52 | 53 | 54 | 对话框dialog2 56 | 57 | 58 | 59 | 你好，欢迎使用emui组件库 60 | 61 | 62 | 63 | 64 | 75 | ``` 76 | 77 | ::: 78 | 79 | ## Attributes 80 | 81 | ### 1、dialog 82 | 83 | | 属性 | 属性值 | 说明 | 84 | | -------- | ------ | ----------------------------- | 85 | | title | String | dialog 标题 | 86 | | visiable | String | dialog 是否开始就展示在页面上 | 87 | | v-slot | slot | 给对话框添加开关按钮 | 88 | | width | String | dialog 宽度 | 89 | | top | String | dialog 与上页的距离 | 90 | -------------------------------------------------------------------------------- /docs/comps/basic/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: icon 3 | --- 4 | 5 | ## 使用 6 | 7 | ### 基本使用 8 | 9 | > 设置图标 name 属性使用即可 10 | 11 | :::demo 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | ``` 19 | 20 | ::: 21 | 22 | ### 图标库 23 | 24 | :::demo 25 | 26 | ```html 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
97 | ``` 98 | 99 | ::: 100 | 101 | ## Attributes 102 | 103 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 104 | | ------ | ------------- | ------ | ------ | ------ | 105 | | name | icon 图标名字 | String | - | - | 106 | | width | icon 图标宽度 | String | - | 75px | 107 | | height | icon 图标高度 | String | - | 75px | 108 | -------------------------------------------------------------------------------- /docs/comps/basic/link.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: link 3 | --- 4 | 5 | ## 使用 6 | ### 基本使用 7 | :::demo 8 | ```html 9 | 10 | 11 | 12 | 13 | 14 | 15 | ``` 16 | ::: 17 | 18 | ### 禁用模式 19 | :::demo 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | ``` 28 | ::: 29 | 30 | ### 添加下划线 31 | :::demo 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | 39 | ``` 40 | ::: 41 | 42 | ### 添加链接文本 43 | :::demo 44 | ```html 45 | 文字链接1 46 | 文字链接2 47 | 文字链接3 48 | 文字链接4 49 | 文字链接5 50 | 文字链接6 51 | ``` 52 | ::: 53 | 54 | ## Attributes 55 | 56 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 57 | | --------- | ------------ | ------- | -------------------------------------------- | -------- | 58 | | type | 链接类型 | String | default,primary,success,warning,danger,info | default | 59 | | href | href属性 | String | - | - | 60 | | underline | 是否有下划线 | Boolean | - | false | 61 | | disabled | 是否禁用 | Boolean | - | false | 62 | | value | 显示文本内容 | String | - | 文字链接 | 63 | -------------------------------------------------------------------------------- /docs/comps/basic/message.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: message 3 | --- 4 | 5 | ## 使用 6 | ### succss的message提醒 7 | ::: demo 8 | ```html 9 | success的消息提示 10 | 22 | 23 | ``` 24 | ::: 25 | ### info的message提醒 26 | ::: demo 27 | ```html 28 | info的消息提示 29 | 41 | 42 | ``` 43 | ::: 44 | ### warning的message提醒 45 | ::: demo 46 | ```html 47 | warning的消息提示 48 | 60 | 61 | ``` 62 | ::: 63 | ### error的message提醒 64 | ::: demo 65 | ```html 66 | error的消息提示 67 | 79 | 80 | ``` 81 | ::: 82 | ## Attributes 83 | # 84 | 85 | | 属性 | 属性值 | 说明 | 86 | | ----- | -------------------------- | ----------------- | 87 | | title | String | message提示的内容 | 88 | | type | success/info/warning/error | 不同类型的message | 89 | | time | Number | 多少毫秒后关闭 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/comps/basic/switch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: switch 3 | --- 4 | 5 | ## 使用 6 | 7 | > 你可以通过设置`v-model`来达到独立控制开关，或者控制开关的状态，` activeColor` `inactiveColor `分别控制开启和关闭的颜色 8 | 9 | :::demo 10 | 11 | ```html 12 | 24 | 25 | 36 | ``` 37 | 38 | ::: 39 | 40 | ## Attributes 41 | 42 | ### 1、switch 43 | 44 | | 属性 | 属性值 | 说明 | 45 | | ------------- | ------ | ------------------- | 46 | | v-model | Object | switch 绑定的对象值 | 47 | | activeColor | String | 激活的颜色 | 48 | | inactiveColor | String | 没激活的颜色 | 49 | | name | String | 名字 | 50 | -------------------------------------------------------------------------------- /docs/comps/basic/tag.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: tag 3 | --- 4 | 5 | ## 使用 6 | ### 基本使用 7 | ::: demo 8 | ```html 9 | 标签1 10 | 标签2 11 | 标签3 12 | 标签4 13 | 标签5 14 | ``` 15 | ::: 16 | 17 | ### 可关闭的Tag 18 | ::: demo 19 | ```html 20 | 标签1 21 | 标签2 22 | 标签3 23 | 标签4 24 | 标签5 25 | ``` 26 | ::: 27 | 28 | ### 动态编辑标签 29 | ::: demo 30 | ```html 31 | 32 | 41 | ``` 42 | ::: 43 | 44 | ## Attributes 45 | ### 1、tag 46 | 47 | | 属性 | 属性值 | 说明 | 48 | | -------- | --------------------------- | ------------- | 49 | | type | success/warning/info/danger | 不同颜色的tag | 50 | | closable | Boolean | 是否可关闭 | 51 | 52 | ### 2、tag-list 53 | 54 | | 属性 | 属性值 | 说明 | 55 | | -------- | ------ | ------------------------------------ | 56 | | datalist | Array | 需要在tag上展示的数据，必须加`.sync` | 57 | 58 | -------------------------------------------------------------------------------- /docs/comps/form/checkbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: checkbox 3 | --- 4 | 5 | ## 使用 6 | ### 基本使用 7 | ::: demo 8 | ```html 9 | 10 | 11 | 12 | 13 | 22 | ``` 23 | ::: 24 | 25 | ### 禁用状态 26 | ::: demo 27 | ```html 28 | 29 | 30 | 31 | 32 | 41 | ``` 42 | ::: 43 | 44 | ### 子项垂直排列 45 | ::: demo 46 | ```html 47 | 48 | 49 | 50 | 51 | 60 | ``` 61 | ::: 62 | 63 | ## Attributes 64 | ### 1、checkbox 65 | 66 | | 属性 | 属性值 | 说明 | 67 | | --------------- | ------------------------- | ----------------- | 68 | | label | string / number / boolean | checkbox 的 value | 69 | | value / v-model | boolean | 绑定值 | 70 | | disabled | true/false | 是否禁用表单 | 71 | | name | string | 原生 name 属性 | 72 | 73 | ### 2、checkbox-group 74 | 75 | | 属性 | 属性值 | 说明 | 76 | | --------------- | ---------- | ---------------- | 77 | | disabled | true/false | 是否禁用表单 | 78 | | value / v-model | Array | 绑定值 | 79 | | vertical | true/false | 子项是否垂直排列 | -------------------------------------------------------------------------------- /docs/comps/form/form.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: form 3 | --- 4 | ## 使用 5 | ::: demo 6 | ```html 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 37 | 38 | 39 | 40 | 提交 41 | 重置 42 | 43 | 44 | 45 | 94 | ``` 95 | ::: 96 | 97 | ## Attributes 98 | ### 1、form 99 | 100 | | 属性 | 属性值 | 说明 | 101 | | ----- | ------ | ---------------------- | 102 | | model | Object | form表单绑定的对象 | 103 | | rules | Object | form表单接受的校验规则 | 104 | 105 | ### 2、form-item 106 | 107 | | 属性 | 属性值 | 说明 | 108 | | ----- | ------ | ------------------------------------------------------------ | 109 | | label | string | 标签文本 | 110 | | prop | string | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | -------------------------------------------------------------------------------- /docs/comps/form/input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: input 3 | --- 4 | 5 | ## 使用 6 | 7 | ### 基本使用 8 | ::: demo 9 | ```html 10 | 11 | 12 | 21 | ``` 22 | ::: 23 | 24 | ### 禁用状态 25 | ::: demo 通过 `disabled` 属性指定是否禁用 input 组件 26 | ```html 27 | 31 | 32 | 33 | 42 | ``` 43 | ::: 44 | 45 | ### 可清空 46 | ::: demo 使用`type='clearable'`即可得到一个可清空的输入框 47 | ```html 48 | 52 | 53 | 54 | 63 | ``` 64 | ::: 65 | ### 密码框 66 | ::: demo 使用`type='password'`即可得到一个可切换显示隐藏的密码框 67 | ```html 68 | 72 | 73 | 74 | 83 | ``` 84 | ::: 85 | 86 | ### 文本域 87 | ::: demo 文本域高度可通过`rows`属性控制 88 | ```html 89 | 93 | 94 | 95 | 104 | ``` 105 | ::: 106 | 107 | ### 尺寸 108 | ::: demo 可通过`size`属性控制输入框的大小 109 | ```html 110 | 111 | 112 | 113 | 124 | ``` 125 | ::: 126 | 127 | ## Attributes 128 | 129 | | 属性 | 属性值 | 说明 | 130 | | ----------- | ---------------------- | -------------- | 131 | | type | text/password/textarea | 表单的类型 | 132 | | disabled | true/false | 是否禁用表单 | 133 | | size | small/large/default | 表单的大小 | 134 | | placeholder | string | 输入框占位文本 | 135 | | value | string | 动态绑定的值 | 136 | | cols | number | textarea的列数 | 137 | | rows | number | textarea的行数 | -------------------------------------------------------------------------------- /docs/comps/form/radio.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: radio 3 | --- 4 | 5 | ## 使用 6 | ### 基本使用 7 | ::: demo 要使用`radio`组件，只需要设置`emui-radio-group v-model`绑定变量，选中意味着变量的值为相应`radio label`属性的值，`label`可以是`String、Number或Boolean`。 8 | ```html 9 | 10 | 11 | 12 | 13 | 14 | 23 | ``` 24 | ::: 25 | 26 | ### 禁用状态 27 | ::: demo 只要在`emui-radio`元素中设置`disabled`属性即可，它接受一个Boolean，true为禁用。 28 | ```html 29 | 30 | 31 | 32 | 33 | 34 | 43 | ``` 44 | ::: 45 | 46 | ### 子项垂直排放 47 | ::: demo 只需设置`emui-radio-group`的`vertical`属性为`true` 48 | ```html 49 | 50 | 51 | 52 | 53 | 54 | 63 | ``` 64 | ::: 65 | 66 | 67 | ### 单选按钮 68 | ::: demo 69 | ```html 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 86 | ``` 87 | ::: 88 | 89 | ## Attributes 90 | ### 1、radio 91 | 92 | | 属性 | 属性值 | 说明 | 93 | | --------------- | ------------------------- | -------------- | 94 | | label | string / number / boolean | radio 的 value | 95 | | value / v-model | string / number / boolean | 绑定值 | 96 | | disabled | true/false | 是否禁用表单 | 97 | | name | string | 原生 name 属性 | 98 | 99 | ### 2、radio-button 100 | 101 | | 属性 | 属性值 | 说明 | 102 | | --------------- | ------------------------- | --------------------- | 103 | | label | string / number / boolean | radio-button 的 value | 104 | | disabled | true/false | 是否禁用表单 | 105 | | value / v-model | string / number / boolean | 绑定值 | 106 | 107 | ### 3、radio-group 108 | 109 | | 属性 | 属性值 | 说明 | 110 | | --------------- | ------------------------- | ---------------- | 111 | | disabled | true/false | 是否禁用表单 | 112 | | value / v-model | string / number / boolean | 绑定值 | 113 | | vertical | true/false | 子项是否垂直排列 | 114 | 115 | -------------------------------------------------------------------------------- /docs/comps/form/select.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: select 3 | --- 4 | 5 | ## 使用 6 | ::: demo 7 | ```html 8 | 9 | 15 | 16 | 34 | ``` 35 | ::: 36 | 37 | ## Attributes 38 | ### 1、select 39 | 40 | | 属性 | 属性值 | 说明 | 41 | | ------------- | ------------- | ------------------ | 42 | | value/v-model | String/Number | select所绑定的数据 | 43 | | placeholder | String | select中的提示文字 | 44 | 45 | ### 2、option 46 | 47 | | 属性 | 属性值 | 说明 | 48 | | ----- | ------------- | ------------------ | 49 | | label | String/Number | option所绑定的数据 | 50 | | value | String/Number | option所绑定的键 | -------------------------------------------------------------------------------- /docs/comps/navigation/nav.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: nav 3 | --- 4 | 5 | ## 使用 6 | 7 | > 我们还可以通过`emui-nav-item`填充 nav 8 | 9 | ::: demo 最普通的竖排 10 | 11 | ```html 12 |
13 | 14 | 首页 15 | 测试 16 | 按钮 17 | 18 |
19 | 30 | ``` 31 | 32 | ::: 33 | 34 | > 我们还可以通过`vertical`支持竖行排列 35 | 36 | ::: demo 我们还可以通过`vertical`支持竖行排列 37 | 38 | ```html 39 |
40 | 45 | 首页 46 | 测试 47 | 你好 48 | 49 |
50 | 51 | 62 | ``` 63 | 64 | ::: 65 | 66 | ## Attributes 67 | 68 | ### 1、nav 69 | 70 | | 属性 | 属性值 | 说明 | 71 | | ------- | ------ | ---- | 72 | | selectd | Array | 数组 | 73 | 74 | ### 2、sub-nav 75 | 76 | | 属性 | 属性值 | 说明 | 77 | | ----- | ------ | ------------ | 78 | | title | string | 子导航的标题 | 79 | 80 | ### 2、nav-item 81 | 82 | | 属性 | 属性值 | 说明 | 83 | | ---- | ------ | --------------------------- | 84 | | name | string | 标题的 name 以设置激活 item | 85 | -------------------------------------------------------------------------------- /docs/comps/navigation/navItem.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: nav-item 3 | --- 4 | 5 | ## 使用 6 | 7 | > 我们还可以通过`emui-nav-item`填充 nav 8 | 9 | :::demo 10 | 11 | ```html 12 | 测试 13 | 14 | 25 | ``` 26 | 27 | ::: 28 | 29 | ## Attributes 30 | 31 | ### 1、nav 32 | 33 | | 属性 | 属性值 | 说明 | 34 | | ------- | ------ | ---- | 35 | | selectd | Array | 数组 | 36 | 37 | ### 2、sub-nav 38 | 39 | | 属性 | 属性值 | 说明 | 40 | | ----- | ------ | ------------ | 41 | | title | string | 子导航的标题 | 42 | 43 | ### 2、nav-item 44 | 45 | | 属性 | 属性值 | 说明 | 46 | | ---- | ------ | --------------------------- | 47 | | name | string | 标题的 name 以设置激活 item | 48 | -------------------------------------------------------------------------------- /docs/comps/navigation/subnav.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: subnav 3 | --- 4 | 5 | ## 使用 6 | 7 | > 我们还可以通过`emui-nav-item`填充 nav 8 | 9 | :::demo 10 | 11 | ```vue 12 | 39 | 40 | 51 | ``` 52 | 53 | ::: 54 | 55 | > 我们还可以通过`vertical`支持竖行排列 56 | 57 | ::: demo 我们还可以通过`vertical`支持竖行排列 58 | 59 | ```html 60 |
61 | 66 | 首页 67 | 68 | 69 | 企业文化 70 | 开发团队 71 | 72 | 73 | 微信 74 | QQ 75 | 76 | 77 | 移动 78 | 联通 79 | 电信 80 | 81 | 82 | 83 | 测试 84 | 85 |
86 | 87 | 98 | ``` 99 | 100 | ::: 101 | 102 | ## Attributes 103 | 104 | ### 1、nav 105 | 106 | | 属性 | 属性值 | 说明 | 107 | | ------- | ------ | ---- | 108 | | selectd | Array | 数组 | 109 | 110 | ### 2、sub-nav 111 | 112 | | 属性 | 属性值 | 说明 | 113 | | ----- | ------ | ------------ | 114 | | title | string | 子导航的标题 | 115 | 116 | ### 2、nav-item 117 | 118 | | 属性 | 属性值 | 说明 | 119 | | ---- | ------ | --------------------------- | 120 | | name | string | 标题的 name 以设置激活 item | 121 | -------------------------------------------------------------------------------- /docs/comps/table/table.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: table 3 | --- 4 | 5 | ## 使用 6 | ### 基本使用 7 | ::: demo 8 | ```html 9 | 14 | 15 | 47 | 48 | 49 | ``` 50 | ::: 51 | 52 | ### 带有多选框且固定表头 53 | ::: demo 54 | ```html 55 | 67 | 68 | 102 | 103 | 104 | ``` 105 | ::: 106 | 107 | ## Attributes 108 | | 属性 | 属性值 | 说明 | 默认 | 109 | | ------------- | ------------- | ---------------------------- | ----- | 110 | | data | Array | table展示的数据 | null | 111 | | columns | Array | table每一列的标题 | null | 112 | | loading | Boolean | 表格是否展示loading状态 | false | 113 | | selected | Boolean | 表格是否展示多选框 | false | 114 | | height | Number/String | 表格的高度 | ' ' | 115 | | selectedItems | Array | 表格多选框选中项所存入的数组,必须加`.sync` | [ ] | 116 | | expendFiled | String | 可展开行的具体描述 | ' ' | 117 | | numberVisible | Boolean | 是否展示序号 | false | 118 | | bordered | Boolean | 是否带边框 | false | 119 | | compact | Boolean | 是否为紧凑型 | false | 120 | | striped | Boolean | 是否展示条纹 | true | 121 | | orderBy | Object | 排序规则 | { } | 122 | 123 | 124 | -------------------------------------------------------------------------------- /docs/guide/guide.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | ## npm安装 4 | 5 | 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 6 | 7 | ``` 8 | npm i ema-ui -S 9 | ``` 10 | ## 引入Ema-UI 11 | 你可以引入整个 Ema-UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Ema-UI。 12 | 13 | ### 完整引入 14 | 在 main.js 中写入以下内容： 15 | ```js 16 | import emui from 'ema-ui' 17 | import "ema-ui/dist/css/index.css" 18 | Vue.use(emui) 19 | ``` 20 | ### 按需引入 21 | 在 main.js 中写入以下内容： 22 | ```js 23 | import {Input,Radio} from 'ema-ui' 24 | import "ema-ui/dist/css/index.css" 25 | Vue.use(Input) 26 | Vue.use(Radio) 27 | ``` 28 | ### 完整组件列表和引入方式 29 | ```js 30 | Vue.use(Input) 31 | Vue.use(Radio) 32 | Vue.use(RadioButton) 33 | Vue.use(RadioGroup) 34 | Vue.use(Checkbox) 35 | Vue.use(CheckboxGroup) 36 | Vue.use(Form) 37 | Vue.use(FormItem) 38 | Vue.use(Button) 39 | Vue.use(Select) 40 | Vue.use(Option) 41 | Vue.use(Table) 42 | Vue.use(Nav) 43 | Vue.use(NavItem) 44 | Vue.use(Subnav) 45 | Vue.use(Dialog) 46 | Vue.use(Icon) 47 | Vue.use(Link) 48 | Vue.use(Tag) 49 | Vue.use(TagList) 50 | Vue.use(Switcher) 51 | Vue.prototype.$notice = Message; 52 | ``` -------------------------------------------------------------------------------- /docs/guide/introduction.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 3 | > 这个基于 Vue2.x 开发的中国风组件库，提供了一系列高质量的中国风 UI 组件，可帮助您轻松地为您的网站或应用程序添加中国文化元素。不仅包括常见的基础组件，还有一些特殊的中国风样式和交互，可以让您的网站或应用程序更具特色和吸引力。同时，这个组件库也提供了完整的文档和示例代码，方便您快速上手，轻松应用。 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'vue' 5 | ], 6 | transform: { 7 | '^.+\\.vue$': 'vue-jest', 8 | '^.+\\.js$': "/node_modules/babel-jest" 9 | }, 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | snapshotSerializers: [ 14 | 'jest-serializer-vue' 15 | ], 16 | testMatch: ['**/tests/**/*.spec.js'], 17 | transformIgnorePatterns: ['/node_modules/'], 18 | } 19 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ema-ui", 3 | "version": "1.0.0", 4 | "private": false, 5 | "description": "基于vue2的UI组件库", 6 | "author": "", 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "rollup -c -w", 10 | "test:unit": "vue-cli-service test:unit", 11 | "test:cov": "vue-cli-service test:unit --coverage", 12 | "lint": "vue-cli-service lint", 13 | "docs:build": "vuepress build docs", 14 | "deploy-gh": "npm run docs:build && bash scripts/deploy-gh.sh", 15 | "deploy":"bash scripts/deploy-gh.sh", 16 | "dev": "vuepress dev docs" 17 | }, 18 | "main": "dist/my-lib-cjs.js", 19 | "module": "dist/my-lib-es.js", 20 | "dependencies": { 21 | "core-js": "^3.8.3", 22 | "vue": "^2.6.14", 23 | "vue-loader": "^17.0.1", 24 | "vuepress": "^1.9.8", 25 | "webpack": "^4.46.0", 26 | "webpack-dev-server": "^3.11.3" 27 | }, 28 | "devDependencies": { 29 | "@babel/eslint-parser": "^7.12.16", 30 | "@vue/cli-plugin-babel": "~5.0.0", 31 | "@vue/cli-plugin-eslint": "~5.0.0", 32 | "@vue/cli-plugin-unit-jest": "~5.0.0", 33 | "@vue/cli-service": "~5.0.0", 34 | "@vue/test-utils": "^1.1.3", 35 | "@vue/vue2-jest": "^27.0.0-alpha.2", 36 | "async-validator": "^4.2.5", 37 | "autoprefixer": "^8.6.5", 38 | "babel-core": "^7.0.0-bridge.0", 39 | "babel-jest": "^27.0.6", 40 | "babel-loader": "^9.1.2", 41 | "babel-plugin-transform-require-context": "^0.1.1", 42 | "babel-preset-env": "^1.7.0", 43 | "css-loader": "^6.7.3", 44 | "cssnano": "^5.1.15", 45 | "ema-ui": "^1.0.0", 46 | "eslint": "^7.32.0", 47 | "eslint-plugin-vue": "^8.0.3", 48 | "jest": "^27.0.5", 49 | "node-sass": "^6.0.1", 50 | "postcss": "^8.4.21", 51 | "rollup": "^3.16.0", 52 | "rollup-plugin-babel": "^4.4.0", 53 | "rollup-plugin-commonjs": "^10.1.0", 54 | "rollup-plugin-copy": "^3.4.0", 55 | "rollup-plugin-livereload": "^2.0.5", 56 | "rollup-plugin-node-resolve": "^5.2.0", 57 | "rollup-plugin-postcss": "^4.0.2", 58 | "rollup-plugin-serve": "^2.0.2", 59 | "rollup-plugin-terser": "^7.0.2", 60 | "rollup-plugin-url": "^3.0.1", 61 | "rollup-plugin-vue": "^5.1.9", 62 | "sass": "^1.57.1", 63 | "sass-loader": "^10.2.0", 64 | "style-loader": "^3.3.1", 65 | "vue-jest": "^3.0.7", 66 | "vue-template-compiler": "^2.6.14", 67 | "vuepress-plugin-demo-container": "^0.2.0", 68 | "vx-ui": "^3.0.1-alpha" 69 | }, 70 | "eslintConfig": { 71 | "root": true, 72 | "env": { 73 | "node": true 74 | }, 75 | "extends": [ 76 | "plugin:vue/essential", 77 | "eslint:recommended" 78 | ], 79 | "parserOptions": { 80 | "parser": "@babel/eslint-parser" 81 | }, 82 | "rules": {}, 83 | "overrides": [ 84 | { 85 | "files": [ 86 | "**/__tests__/*.{j,t}s?(x)", 87 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 88 | ], 89 | "env": { 90 | "jest": true 91 | } 92 | } 93 | ] 94 | }, 95 | "browserslist": [ 96 | "> 1%", 97 | "last 2 versions", 98 | "not dead" 99 | ], 100 | "license": "ISC" 101 | } 102 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import vue from 'rollup-plugin-vue' 4 | import autoprefixer from 'autoprefixer' 5 | import postcss from 'rollup-plugin-postcss' 6 | import cssnano from 'cssnano' 7 | import { terser } from 'rollup-plugin-terser' 8 | import resolve from 'rollup-plugin-node-resolve'; 9 | import serve from 'rollup-plugin-serve' 10 | import livereload from 'rollup-plugin-livereload' 11 | import sass from 'node-sass' 12 | import url from 'rollup-plugin-url' 13 | 14 | import copy from 'rollup-plugin-copy' 15 | export default { 16 | input: "./src/index.js", 17 | output: [ 18 | { 19 | file: './dist/my-lib-umd.js', 20 | format: 'umd', 21 | name: 'myLib' 22 | }, 23 | { 24 | file: './dist/my-lib-es.js', 25 | format: 'es' 26 | }, 27 | { 28 | file: './dist/my-lib-cjs.js', 29 | format: 'cjs' 30 | } 31 | ], 32 | plugins:[ 33 | babel({ 34 | exclude: 'node_modules/**', 35 | runtimeHelpers:true 36 | }), 37 | vue({ 38 | style: { 39 | postcssPlugins: [ 40 | autoprefixer() 41 | ] 42 | } 43 | }), 44 | commonjs(), 45 | resolve(), 46 | postcss({ 47 | extract: true, 48 | extensions: ['.css', '.scss'], // 识别css和scss文件 49 | // 在打包过程中需要配合 node-sass 使用 50 | process: function(context, payload) { 51 | return new Promise((resolve, reject) => { 52 | sass.render({ 53 | file: context 54 | }, function(err, result) { 55 | if (!err) { 56 | resolve(result) 57 | } else { 58 | reject(err) 59 | } 60 | }) 61 | }) 62 | }, 63 | extract: 'css/index.css' 64 | }), 65 | url({ 66 | include: ['**/*.woff', '**/*.ttf'], // 打包字体为base64 67 | limit: Infinity 68 | }), 69 | copy({ 70 | targets: [ 71 | { 72 | src: './src/assets/font/江西拙楷.ttf', 73 | dest: 'dist/assets/font' 74 | }, 75 | { 76 | src:['./src/assets/iconfont/iconfont.ttf','./src/assets/iconfont/iconfont.woff','./src/assets/iconfont/iconfont.woff2'], 77 | dest:'dist/css' 78 | }, 79 | { 80 | src:'./src/assets/icon/', 81 | dest:'dist/assets/' 82 | } 83 | ] 84 | }), 85 | terser(), 86 | serve({ 87 | contentBase: '', //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html 88 | port: 8020 //端口号，默认10001 89 | }), 90 | livereload('dist') //watch dist目录，当目录中的文件发生变化时，刷新页面 91 | ], 92 | external:[ //外部库， 使用'umd'文件时需要先引入这个外部库 93 | 'vue' 94 | ], 95 | } 96 | -------------------------------------------------------------------------------- /scripts/deploy-gh.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 生成静态文件 7 | npm run docs:build 8 | 9 | # 进入生成的文件夹 10 | cd docs/.vuepress/dist 11 | 12 | # 如果是发布到自定义域名 13 | # echo 'www.example.com' > CNAME 14 | 15 | git init 16 | git add -A 17 | git commit -m 'deploy' 18 | 19 | 20 | # 如果发布到 https://.github.io/ 21 | # git push -f git@github.com:hasmokan/component-system.git master:gh-pages 22 | 23 | # 把上面的 换成你自己的 Github 用户名， 换成仓库名，比如我这里就是： 24 | git push -f https://github.com/hasmokan/component-system.git master:gh-pages 25 | 26 | cd - -------------------------------------------------------------------------------- /serverless.yml: -------------------------------------------------------------------------------- 1 | component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件 2 | name: element # (必填) 该 website 组件创建的实例名称 3 | app: element # (可选) 该 website 应用名称 4 | stage: pro # (可选) 用于区分环境信息 5 | 6 | inputs: 7 | src: 8 | src: ./docs/.vuepress # 执行目录路径 9 | dist: ./docs/.vuepress/dist # 部署目录路劲 10 | index: index.html # 网站主页入口文件 11 | error: 404.html # 网站错误入口文件 12 | hook: npm run build # 构建命令,在代码上传之前执行 13 | region: ap-beijing # 地区 14 | protocol: http # 协议 15 | bucket: element-website #OSS存储桶名称 16 | hosts: 17 | - host: element.tanghui.tech 18 | async: false # 是否同步等待 CDN 配置。配置为 false 时，参数 autoRefresh 自动刷新才会生效，如果关联多域名时，为防止超时建议配置为 true。 19 | autoRefresh: true #开启自动 CDN 刷新，用于快速更新和同步加速域名中展示的站点内容 -------------------------------------------------------------------------------- /src/assets/font/font.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: jiangxizhuokai; 3 | src: url("./江西拙楷.ttf"); 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/font/江西拙楷.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/src/assets/font/江西拙楷.ttf -------------------------------------------------------------------------------- /src/assets/icon/emui-arrow-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/emui-arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/emui-arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/emui-arrow-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/搜索组件 (3).zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/src/assets/icon/搜索组件 (3).zip -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 3812189 */ 3 | src: url('./iconfont.woff2?t=1676026204051') format('woff2'), 4 | url('./iconfont.woff?t=1676026204051') format('woff'), 5 | url('./iconfont.ttf?t=1676026204051') format('truetype'); 6 | } 7 | 8 | .iconfont { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .icon-xiangyou1:before { 17 | content: "\e775"; 18 | } 19 | 20 | .icon-loading:before { 21 | content: "\e61d"; 22 | } 23 | 24 | .icon-sort-down:before { 25 | content: "\e843"; 26 | } 27 | 28 | .icon-sort-up:before { 29 | content: "\e844"; 30 | } 31 | 32 | .icon-xiangshangjiantou:before { 33 | content: "\e65d"; 34 | } 35 | 36 | .icon-xiangxiajiantou:before { 37 | content: "\e65e"; 38 | } 39 | 40 | .icon-chahao:before { 41 | content: "\e668"; 42 | } 43 | 44 | .icon-yanjing_yincang:before { 45 | content: "\eb45"; 46 | } 47 | 48 | .icon-yanjing_xianshi:before { 49 | content: "\eb46"; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasmokan/component-system/7b76008f9a4c3dad6aab04e465804f34e7544deb/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/components/Button/button.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 92 | 93 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | import button from "./button.vue" 2 | export const Button= function(Vue){ 3 | Vue.component(button.name,button) 4 | } -------------------------------------------------------------------------------- /src/components/CheckBox/checkbox.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 98 | 101 | 102 | -------------------------------------------------------------------------------- /src/components/CheckBox/checkboxGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/CheckBox/index.js: -------------------------------------------------------------------------------- 1 | import checkbox from './checkbox.vue' 2 | import checkboxGroup from './checkboxGroup.vue' 3 | export const Checkbox= function(Vue){ 4 | Vue.component(checkbox.name,checkbox) 5 | } 6 | export const CheckboxGroup= function(Vue){ 7 | Vue.component(checkboxGroup.name,checkboxGroup) 8 | } -------------------------------------------------------------------------------- /src/components/Form/form.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 59 | 60 | -------------------------------------------------------------------------------- /src/components/Form/formItem.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 119 | 120 | -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | import form from'./form.vue' 2 | import formItem from './formItem.vue' 3 | export const Form=function(Vue){ 4 | Vue.component(form.name,form) 5 | } 6 | export const FormItem=function(Vue){ 7 | Vue.component(formItem.name,formItem) 8 | } -------------------------------------------------------------------------------- /src/components/Icon/dist/index.dev.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports["default"] = void 0; 7 | 8 | var _icon = _interopRequireDefault(require("./icon.vue")); 9 | 10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 11 | 12 | var _default = _icon["default"]; 13 | exports["default"] = _default; -------------------------------------------------------------------------------- /src/components/Icon/icon.js: -------------------------------------------------------------------------------- 1 | const req = require.context('./assets/icon', false, /\.svg$/) 2 | let index = -1 3 | const requireAll = requireContext => requireContext.keys().map(requireContext => { 4 | index++ 5 | let link = req.keys().map(req); 6 | 7 | const className = requireContext.slice(2, requireContext.length - 4); 8 | return { 9 | class: { 10 | name: className, 11 | link: link[index] 12 | }, 13 | } 14 | }) 15 | const icon = requireAll(req) 16 | 17 | export default icon 18 | -------------------------------------------------------------------------------- /src/components/Icon/icon.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 46 | 49 | -------------------------------------------------------------------------------- /src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | import icon from './icon.vue' 2 | export const Icon= function(Vue){ 3 | Vue.component(icon.name,icon) 4 | } -------------------------------------------------------------------------------- /src/components/Input/index.js: -------------------------------------------------------------------------------- 1 | import emuiInput from "./input.vue" 2 | export const Input= function(Vue){ 3 | Vue.component(emuiInput.name,emuiInput) 4 | } -------------------------------------------------------------------------------- /src/components/Input/input.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 128 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /src/components/Link/index.js: -------------------------------------------------------------------------------- 1 | import link from "./link.vue" 2 | export const Link= function(Vue){ 3 | Vue.component(link.name,link) 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Link/link.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 63 | 67 | -------------------------------------------------------------------------------- /src/components/Message/MyMessage.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 79 | 82 | 83 | -------------------------------------------------------------------------------- /src/components/Message/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import MyMessage from "./MyMessage.vue"; 3 | let instances=[]; 4 | let count=0; 5 | let MyMessageComponent=Vue.extend(MyMessage); 6 | function open(options={}){ 7 | let id='mymessage_'+count++; 8 | options.id=id; 9 | options.onClose=function (){ 10 | 11 | } 12 | let instance=new MyMessageComponent({ 13 | el:document.createElement('div'), 14 | propsData:options, 15 | data:{ 16 | onClose(id){ 17 | onCloseFun(id); 18 | } 19 | } 20 | }) 21 | 22 | document.body.appendChild(instance.$el); 23 | let messageTop=680; 24 | instances.forEach((item)=>{ 25 | messageTop += item.$el.offsetHeight+10; 26 | }); 27 | 28 | instance.top = messageTop; 29 | instance.visible=true; 30 | instances.push(instance); 31 | return instance; 32 | } 33 | function onCloseFun(id){ 34 | let index=-1; 35 | let removeElHeight; 36 | for (let i=0;i{ 57 | return open(options) 58 | }, 59 | success:(options)=>{ 60 | let _options=Object.assign({},options,{type:'success'}) 61 | return open(_options) 62 | }, 63 | info:(options)=>{ 64 | let _options=Object.assign({},options,{type:'info'}) 65 | return open(_options) 66 | }, 67 | warning:(options)=>{ 68 | let _options=Object.assign({},options,{type:'warning'}) 69 | return open(_options) 70 | }, 71 | error:(options)=>{ 72 | let _options=Object.assign({},options,{type:'error'}) 73 | return open(_options) 74 | } 75 | } -------------------------------------------------------------------------------- /src/components/Nav/click-outside.js: -------------------------------------------------------------------------------- 1 | let onClickDocument = (e) => { 2 | let { target } = e 3 | callbacks.forEach((item) => { 4 | if (target === item.el || item.el.contains(target)) { 5 | return 6 | } else { 7 | item.callback() 8 | } 9 | }) 10 | } 11 | document.addEventListener('click', onClickDocument) 12 | let callbacks = [] 13 | export default { 14 | bind: function (el, binding) { 15 | callbacks.push({ el, callback: binding.value }) 16 | } 17 | } 18 | 19 | let removeListener = () => { 20 | document.removeEventListener('click', onClickDocument) 21 | } 22 | 23 | export { removeListener } 24 | -------------------------------------------------------------------------------- /src/components/Nav/index.js: -------------------------------------------------------------------------------- 1 | 2 | import nav from "./nav.vue"; 3 | import navItem from './nav-item.vue' 4 | import subnav from './sub-nav.vue' 5 | export const Nav=function(Vue){ 6 | Vue.component(nav.name,nav) 7 | } 8 | export const NavItem=function(Vue){ 9 | Vue.component(navItem.name,navItem) 10 | } 11 | export const Subnav=function(Vue){ 12 | Vue.component(subnav.name,subnav) 13 | } -------------------------------------------------------------------------------- /src/components/Nav/nav-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 33 | 39 | -------------------------------------------------------------------------------- /src/components/Nav/nav.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 90 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /src/components/Nav/sub-nav.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 104 | 110 | 111 | -------------------------------------------------------------------------------- /src/components/Radio/RadioButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/Radio/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/Radio/index.js: -------------------------------------------------------------------------------- 1 | import radio from './radio.vue' 2 | import radioGroup from './RadioGroup.vue' 3 | import radioButton from './RadioButton.vue' 4 | export const Radio=function(Vue){ 5 | Vue.component(radio.name,radio) 6 | } 7 | export const RadioGroup=function(Vue){ 8 | Vue.component(radioGroup.name,radioGroup) 9 | } 10 | export const RadioButton=function(Vue){ 11 | Vue.component(radioButton.name,radioButton) 12 | } -------------------------------------------------------------------------------- /src/components/Radio/radio.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 85 | 88 | 89 | -------------------------------------------------------------------------------- /src/components/Select/index.js: -------------------------------------------------------------------------------- 1 | import select from './select.vue' 2 | import option from './option.vue' 3 | export const Select=function(Vue){ 4 | Vue.component(select.name,select) 5 | } 6 | export const Option=function(Vue){ 7 | Vue.component(option.name,option) 8 | } -------------------------------------------------------------------------------- /src/components/Select/option.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | -------------------------------------------------------------------------------- /src/components/Select/select.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 75 | 76 | -------------------------------------------------------------------------------- /src/components/Switch/Switch.vue: -------------------------------------------------------------------------------- 1 | 13 | 67 | -------------------------------------------------------------------------------- /src/components/Switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch.vue' 2 | 3 | export const Switcher=function(Vue){ 4 | Vue.component(Switch.name,Switch) 5 | } -------------------------------------------------------------------------------- /src/components/Table/index.js: -------------------------------------------------------------------------------- 1 | import table from './table.vue' 2 | 3 | export const Table=function(Vue){ 4 | Vue.component(table.name,table) 5 | } -------------------------------------------------------------------------------- /src/components/Table/table.vue: -------------------------------------------------------------------------------- 1 | 86 | 87 | 259 | 260 | -------------------------------------------------------------------------------- /src/components/Tag/index.js: -------------------------------------------------------------------------------- 1 | import tag from './tag.vue' 2 | import tagList from './tagList.vue' 3 | export const Tag=function(Vue){ 4 | Vue.component(tag.name,tag) 5 | } 6 | export const TagList=function(Vue){ 7 | Vue.component(tagList.name,tagList) 8 | } -------------------------------------------------------------------------------- /src/components/Tag/tag.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/Tag/tagList.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 71 | 72 | -------------------------------------------------------------------------------- /src/components/dialog/dialog.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 75 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import emuiDialog from './dialog.vue' 2 | 3 | export const Dialog= function(Vue){ 4 | Vue.component(emuiDialog.name,emuiDialog) 5 | } -------------------------------------------------------------------------------- /src/components/progress/ProGress.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | 33 | -------------------------------------------------------------------------------- /src/dist/index.dev.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports["default"] = void 0; 7 | 8 | var _vue = _interopRequireDefault(require("vue")); 9 | 10 | var _Input = _interopRequireDefault(require("./components/Input")); 11 | 12 | var _CheckBox = _interopRequireDefault(require("./components/CheckBox")); 13 | 14 | var _Form = _interopRequireDefault(require("./components/Form")); 15 | 16 | var _Radio = _interopRequireDefault(require("./components/Radio")); 17 | 18 | var _select = _interopRequireDefault(require("./components/select")); 19 | 20 | var _table = _interopRequireDefault(require("./components/table")); 21 | 22 | var _switch = _interopRequireDefault(require("./components/switch")); 23 | 24 | var _nav = _interopRequireDefault(require("./components/Nav/nav")); 25 | 26 | var _navItem = _interopRequireDefault(require("./components/Nav/nav-item")); 27 | 28 | var _subNav = _interopRequireDefault(require("./components/Nav/sub-nav")); 29 | 30 | var _dialog = _interopRequireDefault(require("./components/dialog/dialog")); 31 | 32 | var _Button = _interopRequireDefault(require("./components/Button")); 33 | 34 | var _icon = _interopRequireDefault(require("./components/icon")); 35 | 36 | require("./assets/iconfont/iconfont.css"); 37 | 38 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 39 | 40 | // import Vue from 'vue' 41 | _vue["default"].config.productionTip = false; 42 | var components = { 43 | 'emui-nav': _nav["default"], 44 | 'emui-nav-item': _navItem["default"], 45 | 'emui-sub-nav': _subNav["default"], 46 | 'emui-dialog': _dialog["default"], 47 | 'emui-button': _Button["default"], 48 | 'emui-switch': _switch["default"], 49 | 'emui-icon': _icon["default"], 50 | 'emui-input': _Input["default"], 51 | 'emui-checkbox': _CheckBox["default"], 52 | 'emui-checkbox-group': _CheckBox["default"].item, 53 | 'emui-form': _Form["default"], 54 | 'emui-form-item': _Form["default"].item, 55 | 'emui-radio': _Radio["default"], 56 | 'emui-radio-button': _Radio["default"].button, 57 | 'emui-radio-group': _Radio["default"].item, 58 | 'emui-select': _select["default"], 59 | 'emui-option': _select["default"].item, 60 | 'emui-table': _table["default"] 61 | }; 62 | 63 | var install = function install(Vue) { 64 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 65 | Object.keys(components).forEach(function (key) { 66 | Vue.component(key, components[key]); 67 | }); 68 | }; 69 | 70 | var _default = install; 71 | exports["default"] = _default; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | 4 | import {Input} from "./components/Input" 5 | import {Checkbox,CheckboxGroup} from "./components/CheckBox" 6 | import {Form,FormItem} from "./components/Form" 7 | import {Radio,RadioButton,RadioGroup} from "./components/Radio" 8 | import {Select,Option} from "./components/Select" 9 | import {Table} from "./components/Table"; 10 | import {Switcher} from "./components/Switch" 11 | import {Nav,NavItem,Subnav} from './components/Nav' 12 | import {Dialog} from './components/Dialog' 13 | import {Button} from "./components/Button" 14 | import {Icon} from './components/Icon' 15 | import "./components/Icon/icon.js" 16 | import {Link} from './components/Link' 17 | import {Tag,TagList} from './components/Tag' 18 | import Message from "./components/Message" 19 | import "./assets/iconfont/iconfont.css" 20 | 21 | import "./styles/index.scss" 22 | Vue.config.productionTip = false 23 | 24 | const install=function(Vue,options={}){ 25 | Vue.use(Button) 26 | Vue.use(Input) 27 | Vue.use(Checkbox) 28 | Vue.use(CheckboxGroup) 29 | Vue.use(Form) 30 | Vue.use(FormItem) 31 | Vue.use(Radio) 32 | Vue.use(RadioButton) 33 | Vue.use(RadioGroup) 34 | Vue.use(Select) 35 | Vue.use(Option) 36 | Vue.use(Table) 37 | Vue.use(Nav) 38 | Vue.use(Switcher) 39 | Vue.use(NavItem) 40 | Vue.use(Subnav) 41 | Vue.use(Dialog) 42 | Vue.use(Icon) 43 | Vue.use(Link) 44 | Vue.use(Tag) 45 | Vue.use(TagList) 46 | Vue.prototype.$notice = Message; 47 | } 48 | 49 | export default install 50 | 51 | export { 52 | Button, 53 | Input, 54 | Checkbox, 55 | CheckboxGroup, 56 | Form, 57 | FormItem, 58 | Radio, 59 | RadioButton, 60 | RadioGroup, 61 | Select, 62 | Option, 63 | Table, 64 | Nav, 65 | NavItem, 66 | Subnav, 67 | Dialog, 68 | Icon, 69 | Link, 70 | Tag, 71 | TagList, 72 | Message, 73 | Switcher 74 | } -------------------------------------------------------------------------------- /src/mixins/emitter.js: -------------------------------------------------------------------------------- 1 | //封装一个父子间通信的方法 2 | export default { 3 | methods: { 4 | dispatch(componentName, eventName, params) { 5 | let parent = this.$parent || this.$root; 6 | let name = parent.$options.name; 7 | while (parent && (!name || name !== componentName)) { 8 | parent = parent.$parent; 9 | if (parent) name = parent.$options.name; 10 | } 11 | if (parent) parent.$emit.apply(parent, [eventName].concat(params)); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/styles/button.scss: -------------------------------------------------------------------------------- 1 | @import './common/scss/color.scss'; 2 | //常规字体库 3 | .emui-button { 4 | display: inline-block; 5 | margin: 10px; 6 | position: relative; 7 | font-family: "jiangxizhuokai"; 8 | line-height: 1; 9 | cursor: pointer; 10 | background-color: $normal-color; 11 | border: 1px solid #dcdfe6; 12 | white-space: nowrap; 13 | //字体颜色 14 | color: $font-black-color; 15 | box-sizing: border-box; 16 | outline: none; 17 | transition: 0.1s; 18 | font-weight: 500; 19 | 20 | // 禁止文字被选中 21 | user-select: none; 22 | 23 | 24 | padding: 12px 20px; 25 | font-size: 14px; 26 | border-radius: 4px; 27 | &:hover, 28 | &:focus { 29 | color: $normal-active-color; 30 | border-color: $warning-color; 31 | background-color: #ecf5ff; 32 | } 33 | } 34 | .emui-button--default { 35 | display: inline-block; 36 | position: relative; 37 | font-family: "jiangxizhuokai"; 38 | line-height: 1; 39 | cursor: pointer; 40 | background-color: $normal-color; 41 | border: 1px solid #dcdfe6; 42 | white-space: nowrap; 43 | //字体颜色 44 | color: $font-black-color; 45 | box-sizing: border-box; 46 | outline: none; 47 | transition: 0.1s; 48 | font-weight: 500; 49 | 50 | // 禁止文字被选中 51 | user-select: none; 52 | padding: 12px 20px; 53 | font-size: 14px; 54 | border-radius: 4px; 55 | &:hover, 56 | &:focus { 57 | color: $normal-active-color; 58 | border-color: $warning-color; 59 | background-color: #ecf5ff; 60 | } 61 | } 62 | .emui-button--primarygold { 63 | color: $font-gold-color; 64 | background-color: $primary-color; 65 | border-color: $primary-color; 66 | // box-shadow: inset 3px 6px 10px #337ecc, inset -3px -7px 10px #4dbeff; 67 | &:hover, 68 | &:focus { 69 | background: $normal-active-color; 70 | background-color: $normal-active-color; 71 | color: #fff; 72 | } 73 | } 74 | .emui-button--primarywhite { 75 | color: #fff; 76 | background-color: $primary-color; 77 | border-color: $primary-color; 78 | // box-shadow: inset 3px 6px 10px #337ecc, inset -3px -7px 10px #4dbeff; 79 | &:hover, 80 | &:focus { 81 | background: $normal-active-color; 82 | background-color: $normal-active-color; 83 | color: #fff; 84 | } 85 | } 86 | .emui-button--successgold { 87 | color: $font-gold-color; 88 | background-color: $success-color; 89 | border-color: $success-color; 90 | &:hover, 91 | &:focus { 92 | background: $success-active-color; 93 | background-color: $success-active-color; 94 | color: #fff; 95 | } 96 | } 97 | 98 | .emui-button--successwhite { 99 | color: #fff; 100 | background-color: $success-color; 101 | border-color: $success-color; 102 | &:hover, 103 | &:focus { 104 | background: $success-active-color; 105 | background-color: $success-active-color; 106 | color: #fff; 107 | } 108 | } 109 | 110 | .emui-button--warning { 111 | color: #fff; 112 | background-color: $warning-color; 113 | border-color: $warning-color; 114 | &:hover, 115 | &:focus { 116 | background: $warning-active-color; 117 | background-color: $warning-active-color; 118 | color: #fff; 119 | } 120 | } 121 | .emui-button--dangerwhite { 122 | color: #fff; 123 | background-color: $danger-color; 124 | border-color: $danger-color; 125 | &:hover, 126 | &:focus { 127 | background: $danger-active-color; 128 | background-color: $danger-active-color; 129 | color: #fff; 130 | } 131 | } 132 | .emui-button--dangergold { 133 | color: $font-gold-color; 134 | background-color: $danger-color; 135 | border-color: $danger-color; 136 | &:hover, 137 | &:focus { 138 | background: $danger-active-color; 139 | background-color: $danger-active-color; 140 | color: #fff; 141 | } 142 | } 143 | 144 | // round 145 | .emui-button.round { 146 | border-radius: 20px; 147 | padding: 12px 23px; 148 | } 149 | // 圆形按钮 150 | .emui-button.is-circle { 151 | border-radius: 50%; 152 | padding: 12px; 153 | } 154 | //拟态 155 | .emui-button.mimicry { 156 | box-shadow: inset 3px 6px 10px #ccc, inset -3px -7px 10px #fff; 157 | } 158 | .emui-button--primary.mimicry { 159 | box-shadow: inset 3px 6px 10px #337ecc, inset -3px -7px 10px #4dbeff; 160 | } 161 | .emui-button--info.mimicry { 162 | box-shadow: inset 3px 6px 10px #73767a, inset -3px -7px 10px #adb0b8; 163 | } 164 | .emui-button--success.mimicry { 165 | box-shadow: inset 3px 6px 10px #6aa54e, inset -3px -7px 10px #a0f774; 166 | } 167 | .emui-button--warning.mimicry { 168 | box-shadow: inset 3px 6px 10px #bc914f, inset -3px -7px 10px #ffd977; 169 | } 170 | .emui-button--danger.mimicry { 171 | box-shadow: inset 3px 6px 10px #c45656, inset -3px -7px 10px #ff8282; 172 | } 173 | 174 | // 朴素按钮 175 | .emui-button.plain { 176 | box-shadow: unset; 177 | &:hover, 178 | &:focus { 179 | background: #fff; 180 | border-color: $primary-color; 181 | color: $primary-color; 182 | } 183 | } 184 | .emui-button--primarywhite.plain { 185 | box-shadow: unset; 186 | color: #fff; 187 | background: $primary-active-color; 188 | &:hover, 189 | &:focus { 190 | background: $normal-active-color; 191 | border-color: $font-gold-color; 192 | color: $font-gold-color; 193 | } 194 | } 195 | 196 | .emui-button--primarygold.plain { 197 | box-shadow: unset; 198 | color: $font-gold-color; 199 | background: $primary-active-color; 200 | &:hover, 201 | &:focus { 202 | background: $normal-active-color; 203 | border-color: $font-gold-color; 204 | color: $font-gold-color; 205 | } 206 | } 207 | .emui-button--successwhite.plain { 208 | box-shadow: unset; 209 | color: #fff; 210 | background: #c2e7b0; 211 | &:hover, 212 | &:focus { 213 | background: #67c23a; 214 | border-color: $font-gold-color; 215 | color: #fff; 216 | } 217 | } 218 | .emui-button--successgold.plain { 219 | box-shadow: unset; 220 | color: $font-gold-color; 221 | background: #c2e7b0; 222 | &:hover, 223 | &:focus { 224 | background: #67c23a; 225 | border-color: $font-gold-color; 226 | color: $font-gold-color; 227 | } 228 | } 229 | .emui-button--info.plain { 230 | box-shadow: unset; 231 | color: #909399; 232 | background: #d3d4d6; 233 | &:hover, 234 | &:focus { 235 | background: #909399; 236 | border-color: #909399; 237 | color: #fff; 238 | } 239 | } 240 | .emui-button--warning.plain { 241 | box-shadow: unset; 242 | color: #e6a23c; 243 | background: #f5dab1; 244 | &:hover, 245 | &:focus { 246 | background: $warning-color; 247 | border-color: $font-gold-color; 248 | color: #fff; 249 | } 250 | } 251 | .emui-button--dangerwhite.plain { 252 | box-shadow: unset; 253 | color: #fff; 254 | background: #fbc4c4; 255 | &:hover, 256 | &:focus { 257 | background: $danger-color; 258 | border-color: $font-gold-color; 259 | color: $font-gold-color; 260 | } 261 | } 262 | .emui-button--dangergold.plain { 263 | box-shadow: unset; 264 | color: #f56c6c; 265 | background: #fbc4c4; 266 | &:hover, 267 | &:focus { 268 | background: $danger-color; 269 | border-color: $font-gold-color; 270 | color: $font-gold-color; 271 | } 272 | } 273 | 274 | //圆形按钮 275 | .emui-button.circle { 276 | border-radius: 50%; 277 | } 278 | // //切角按钮cut 279 | // .emui-button.cut { 280 | // background: linear-gradient(135deg, transparent 10px, #ff1493 0) top left, 281 | // linear-gradient(-135deg, transparent 10px, #ff1493 0) top right, 282 | // linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right, 283 | // linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left; 284 | // background-size: 50% 50%; 285 | // background-repeat: no-repeat; 286 | // } 287 | 288 | // 禁用 289 | .emui-button.disabled .mask { 290 | position: absolute; 291 | width: 100%; 292 | height: 100%; 293 | background-color: rgba(148, 146, 146, 0.39); 294 | left: 0; 295 | top: 0; 296 | box-shadow: 2px 2px 3px rgba(216, 213, 213, 0.3); 297 | border-radius: 4px; 298 | z-index: 100; 299 | } 300 | .emui-button.round .mask { 301 | border-radius: 20px; 302 | } 303 | .emui-button.circle .mask { 304 | border-radius: 50%; 305 | } 306 | .emui-button.disabled { 307 | opacity: 0.5; 308 | cursor: no-drop; 309 | } -------------------------------------------------------------------------------- /src/styles/checkbox.scss: -------------------------------------------------------------------------------- 1 | .checkbox { 2 | padding: 5px; 3 | display: inline-block; 4 | font-family: "jiangxizhuokai"; 5 | .emui-checkbox-primary { 6 | display: flex; 7 | align-items: center; 8 | .emui-checkbox { 9 | width: 20px; 10 | height: 20px; 11 | &__disabled--true{ 12 | cursor: not-allowed; 13 | } 14 | } 15 | .emui-checkbox-label { 16 | margin-left: 5px; 17 | vertical-align: middle; 18 | } 19 | .label-disabled{ 20 | color: #ccc; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/common/scss/animation.scss: -------------------------------------------------------------------------------- 1 | @keyframes spin{ 2 | 0%{ 3 | transform: rotate(0deg); 4 | } 5 | 100%{ 6 | transform: rotate(360deg); 7 | } 8 | } 9 | @mixin spin { 10 | animation: spin 2s infinite linear; 11 | } -------------------------------------------------------------------------------- /src/styles/common/scss/color.scss: -------------------------------------------------------------------------------- 1 | //普通颜色和激活颜色 2 | $normal-color: #ffffff; 3 | $normal-active-color: #40c1ca; 4 | //初步颜色和激活颜色 5 | $primary-color: #40878D; 6 | $primary-shadow-color:#38767b; 7 | $primary-active-color: #c5eaed; 8 | //通知颜色 9 | $info-color: #909399; 10 | $info-active-color: #a6a9ad; 11 | //成功颜色 12 | $success-color: #67c23a; 13 | $success-active-color: #85ce61; 14 | //警告颜色 15 | $warning-color: #ff9900; 16 | $warning-active-color: #e6a23c; 17 | //危险颜色 18 | $danger-color: #c04851; 19 | $danger-active-color: #f78989; 20 | //禁用颜色 21 | $diasabled-color: #cfccc9; 22 | $link-color: #1661ab; 23 | //背景色 24 | $background-color:#e6f2f5; 25 | 26 | //字体颜色 27 | /*有什么需要添加的字体颜色可以添加到下面*/ 28 | $font-gold-color-oppose:#0b28e3; 29 | $font-gold-color: #e3c60b; 30 | $font-black-color: #000000; 31 | 32 | /* 33 | 有什么颜色需要添加的添加到下面注意命名规则 color放在后面 34 | */ 35 | 36 | $background-flesh-color:#f8e8db; 37 | -------------------------------------------------------------------------------- /src/styles/common/scss/font.scss: -------------------------------------------------------------------------------- 1 | @import '../../../assets/font/font.scss' -------------------------------------------------------------------------------- /src/styles/dialog.scss: -------------------------------------------------------------------------------- 1 | // //@import url(); 引入公共scss类 2 | @import "./common/scss/color.scss"; 3 | // //引入江西拙楷字体 4 | // @import "./common/scss/font.scss"; 5 | 6 | .emui-dialog--wrapper { 7 | position: fixed; 8 | top: 0; 9 | right: 0; 10 | bottom: -3vh; 11 | left: 0; 12 | overflow: auto; 13 | margin: 0; 14 | z-index: 2001; 15 | background-color: rgba(0, 0, 0, 0.5); 16 | .emui-dialog { 17 | position: relative; 18 | margin: 15vh auto 50px; 19 | background: #f8e8db; 20 | border-radius: 4px; 21 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 22 | 23 | border: 5px solid $primary-color; 24 | box-sizing: border-box; 25 | &--header { 26 | padding: 20px 20px 10px; 27 | display: flex; 28 | justify-content: space-between; 29 | .emui-dialog--title { 30 | 31 | font-family: "jiangxizhuokai"; 32 | line-height: 24px; 33 | font-size: 22px; 34 | color: $primary-color; 35 | } 36 | .emui-dialog--headerbtn { 37 | padding: 0; 38 | background: transparent; 39 | border: none; 40 | outline: none; 41 | cursor: pointer; 42 | font-size: 16px; 43 | .emui-icon-close { 44 | color: 909399; 45 | } 46 | } 47 | } 48 | &--body { 49 | padding: 30px 20px; 50 | color: #606266; 51 | font-size: 14px; 52 | // CSS 属性 word-break 指定了怎样在单词内断行 53 | word-break: break-all; 54 | } 55 | &--footer { 56 | padding: 10px 20px 20px; 57 | text-align: right; 58 | box-sizing: border-box; 59 | // ::v-deep 相当less中的/deep/ 60 | ::v-deep .emui-button:first-child { 61 | margin-right: 20px; 62 | } 63 | } 64 | } 65 | // 拟态风格 66 | .emui-dialog.mimicry { 67 | border-radius: 12px; 68 | box-shadow: inset 7px 14px 23px #dadada, inset -7px -14px 23px #eeeeee; 69 | } 70 | } 71 | .dialog-fade-enter-active { 72 | animation: fade 0.5s; 73 | } 74 | .dialog-fade-leave-active { 75 | animation: fade 0.39s reverse; 76 | } 77 | @keyframes fade { 78 | from { 79 | opacity: 0; 80 | transform: translateY(-3vh); 81 | } 82 | to { 83 | opacity: 1; 84 | transform: translateY(0); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/styles/icon.scss: -------------------------------------------------------------------------------- 1 | // @charset "UTF-8"; 2 | 3 | .emui-icon { 4 | display: inline-block; 5 | overflow: visible; 6 | font-size: 3px; 7 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./button"; 2 | @import "./input"; 3 | @import "./checkbox"; 4 | @import "./common/scss/color.scss"; 5 | @import "./common/scss/animation.scss"; 6 | @import "./radio"; 7 | @import "./select"; 8 | @import "./table"; 9 | @import "./tag"; 10 | 11 | @import './nav.scss'; 12 | @import './totalnav.scss'; 13 | @import './subnav.scss'; 14 | @import './navitem.scss'; 15 | @import './dialog.scss'; 16 | 17 | @import './icon.scss'; 18 | 19 | @import './link.scss'; 20 | @import './message'; 21 | 22 | @font-face { 23 | font-family: jiangxizhuokai; 24 | src: url("../assets/font/江西拙楷.ttf"); 25 | } -------------------------------------------------------------------------------- /src/styles/input.scss: -------------------------------------------------------------------------------- 1 | @import "./common/scss/color.scss"; 2 | // @import "./common/scss/font.scss"; 3 | 4 | 5 | .input{ 6 | width: 160px; 7 | height: 40px; 8 | line-height: 40px; 9 | position: relative; 10 | margin: 6px; 11 | } 12 | .emui-input { 13 | outline: none; 14 | box-sizing: border-box; 15 | border-radius: 4px; 16 | border: 2px solid $primary-color; 17 | font-size: 14px; 18 | font-family: "jiangxizhuokai"; 19 | padding: 7px 10px; 20 | width: 100%; 21 | 22 | &:active, 23 | &:focus { 24 | border-color: $primary-active-color; 25 | box-shadow: 0 0 4px $primary-active-color; 26 | } 27 | 28 | &__size-large { 29 | height: 40px; 30 | line-height: 40px; 31 | } 32 | &__size-small { 33 | height: 25px; 34 | line-height: 25px; 35 | } 36 | &__size-default { 37 | height: 32px; 38 | line-height: 32px; 39 | } 40 | &__disabled-true{ 41 | background-color:#f5f7fa; 42 | cursor: no-drop; 43 | } 44 | } 45 | .eyes{ 46 | font-size: 23px; 47 | position: absolute; 48 | top: 2px; 49 | right: 8px; 50 | color: $info-color; 51 | } -------------------------------------------------------------------------------- /src/styles/link.scss: -------------------------------------------------------------------------------- 1 | @import "./common/scss/color"; 2 | .emui-link { 3 | display: inline-block; 4 | text-decoration: none; 5 | } 6 | 7 | .emui-link.disabled { 8 | opacity: 0.5; 9 | cursor: not-allowed; 10 | } 11 | 12 | .emui-link--default { 13 | color: $font-gold-color; 14 | 15 | &:hover, 16 | &:focus { 17 | color: $normal-active-color; 18 | } 19 | } 20 | 21 | .emui-link--default.underline { 22 | border-bottom: 1px solid $font-gold-color; 23 | } 24 | 25 | .emui-link--primary { 26 | color: $primary-color ; 27 | 28 | &:hover, 29 | &:focus { 30 | color: $primary-active-color ; 31 | } 32 | } 33 | 34 | .emui-link--primary.underline { 35 | border-bottom: 1px solid $primary-color; 36 | } 37 | 38 | .emui-link--success { 39 | color: $success-color ; 40 | 41 | &:hover, 42 | &:focus { 43 | color: $success-active-color ; 44 | } 45 | } 46 | 47 | .emui-link--success.underline { 48 | border-bottom: 1px solid $success-color ; 49 | } 50 | 51 | .emui-link--warning { 52 | color: $warning-color; 53 | 54 | &:hover, 55 | &:focus { 56 | color: $warning-active-color; 57 | } 58 | } 59 | 60 | .emui-link--warning.underline { 61 | border-bottom: 1px solid $warning-color; 62 | } 63 | 64 | .emui-link--danger { 65 | color: $danger-color; 66 | 67 | &:hover, 68 | &:focus { 69 | color: $danger-active-color ; 70 | } 71 | } 72 | 73 | .emui-link--danger.underline { 74 | border-bottom: 1px solid $danger-color; 75 | } 76 | 77 | .emui-link--info { 78 | color: $info-color; 79 | 80 | &:hover, 81 | &:focus { 82 | color: $info-active-color ; 83 | } 84 | } 85 | 86 | .emui-link--info.underline { 87 | border-bottom: 1px solid $info-color; 88 | } -------------------------------------------------------------------------------- /src/styles/message.scss: -------------------------------------------------------------------------------- 1 | //引入在线图标 2 | @import url('http://at.alicdn.com/t/c/font_3888617_r31bhbbh9wr.css'); 3 | 4 | .emui-message { 5 | width: 380px; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | border: 1px solid #ebeef5; 9 | position: fixed; 10 | top: 10%; 11 | left: 50%; 12 | transform: translateX(-50%); 13 | z-index: 99999; 14 | line-height: 20px; 15 | transition: top 0.5s; 16 | background-color: #edf2fc; 17 | padding: 15px 15px 15px 20px; 18 | display: flex; 19 | -webkit-box-align:center; 20 | -ms-flex-align: center; 21 | align-items: center; 22 | border-radius: 5px; 23 | } 24 | 25 | .title{ 26 | color: rgba(41, 115, 186, 0.8); 27 | font-family: "jiangxizhuokai"; 28 | } 29 | .close-btn { 30 | position: absolute; 31 | right: 10px; 32 | top: 15px; 33 | cursor: pointer; 34 | } 35 | 36 | .message-fade-enter, 37 | .message-fade-leave { 38 | opacity: 0; 39 | transform: translateY(-100px); 40 | } 41 | 42 | .message-fade-enter-active, 43 | .message-fade-leave-active { 44 | transition: opacity 0.5s, transform 0.5s; 45 | } 46 | 47 | .success { 48 | background-color: rgba(101, 143, 50, 0.25); 49 | border-color: #e1f3d8; 50 | .icon{ 51 | margin-right: 5px; 52 | color: rgba(101,143,50,0.6); 53 | 54 | } 55 | } 56 | 57 | //.emui-message--success .emui-message__content { 58 | // color: rgba(50, 136, 143, 0.2); 59 | //} 60 | 61 | .warning { 62 | background-color: rgba(219,207,33,0.44); 63 | border-color: #faecd8; 64 | .icon{ 65 | margin-right: 5px; 66 | color: rgba(186,176,84,1); 67 | } 68 | } 69 | 70 | //.emui-message--warning .emui-message__content { 71 | // color: rgba(219, 207, 33, 0.44); 72 | //} 73 | 74 | .error { 75 | background-color: #fef0f0; 76 | border-color: #fde2e2; 77 | .icon{ 78 | margin-right: 5px; 79 | color: rgba(230,48,196,0.5); 80 | } 81 | } 82 | 83 | //.emui-message--error .emui-message__content { 84 | // color: rgba(230, 48, 48, 0.22); 85 | //} 86 | .info{ 87 | background-color: #edf2fc; 88 | border-color: #ebeef5; 89 | .icon{ 90 | margin-right: 5px; 91 | color: rgba(67,140,255,0.6); 92 | } 93 | } 94 | 95 | //.emui-message--info .emui-message__content { 96 | // color: rgba(101, 143, 50, 0.2); 97 | //} 98 | -------------------------------------------------------------------------------- /src/styles/message.scss.rej: -------------------------------------------------------------------------------- 1 | diff a/src/styles/message.scss b/src/styles/message.scss (rejected hunks) 2 | @@ -1,69 +0,0 @@ 3 | -.emui-message { 4 | - width: 380px; 5 | - -webkit-box-sizing: border-box; 6 | - box-sizing: border-box; 7 | - border-width: 1px; 8 | - 9 | - border-style: solid; 10 | - border-color: #ebeef5; 11 | - position: fixed; 12 | - z-index: 99999; 13 | - line-height: 20px; 14 | - transition: top 0.5s; 15 | - background-color: #edf2fc; 16 | - padding: 15px 15px 15px 20px; 17 | - display: flex; 18 | - -webkit-box-align: center; 19 | - -ms-flex-align: center; 20 | - align-items: center; 21 | - border-radius: 5px; 22 | -} 23 | - 24 | -.close-btn { 25 | - position: absolute; 26 | - right: 10px; 27 | - top: 10px; 28 | - cursor: pointer; 29 | -} 30 | - 31 | -.message-fade-enter, 32 | -.message-fade-leave-to { 33 | - opacity: 0; 34 | - transform: translateY(-100px); 35 | -} 36 | - 37 | -.message-fade-enter-active, 38 | -.message-fade-leave-active { 39 | - transition: opacity 0.5s, transform 0.5s; 40 | -} 41 | - 42 | -.emui-message--success { 43 | - background-color: #f0f9eb; 44 | - border-color: #e1f3d8; 45 | -} 46 | - 47 | -.emui-message--success .emui-message__content { 48 | - color: rgba(50, 136, 143, 0.2); 49 | -} 50 | - 51 | -.emui-message--warning { 52 | - background-color: #fdf6ec; 53 | - border-color: #faecd8; 54 | -} 55 | - 56 | -.emui-message--warning .emui-message__content { 57 | - color: rgba(219, 207, 33, 0.44); 58 | -} 59 | - 60 | -.emui-message--error { 61 | - background-color: #fef0f0; 62 | - border-color: #fde2e2; 63 | -} 64 | - 65 | -.emui-message--error .emui-message__content { 66 | - color: rgba(230, 48, 48, 0.22); 67 | -} 68 | - 69 | -.emui-message--info .emui-message__content { 70 | - color: rgba(101, 143, 50, 0.2); 71 | -} 72 | \ No newline at end of file 73 | -------------------------------------------------------------------------------- /src/styles/nav.scss: -------------------------------------------------------------------------------- 1 | $border-color-hover: #666; 2 | $border-color: #999; 3 | $border-color-light: lighten($border-color, 30%); 4 | $border-radius: 4px; 5 | $box-shadow-color: rgba(0, 0, 0, 0.5); 6 | $button-active-bg: #eee; 7 | $button-bg: white; 8 | $button-height: 32px; 9 | $color: #333; 10 | $light-color: #666; 11 | $font-size: 14px; 12 | $small-font-size: 12px; 13 | $input-height: 32px; 14 | $red: #F1453D; 15 | $grey: #eee; 16 | $blue: #4a90e2; 17 | .box-shadow { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 19 | } 20 | @keyframes spin { 21 | 0% { transform: rotate(0deg); } 22 | 100% { transform: rotate(360deg); } 23 | } -------------------------------------------------------------------------------- /src/styles/navitem.scss: -------------------------------------------------------------------------------- 1 | @import './common/scss/color.scss'; 2 | @import "./nav.scss"; 3 | 4 | .emui-nav-item { 5 | box-sizing: content-box; 6 | color: $font-gold-color; 7 | font-family: "jiangxizhuokai"; 8 | padding: 10px 20px; 9 | position: relative; 10 | &:not(.vertical) { 11 | &.selected { 12 | &::after { 13 | content: ""; 14 | position: absolute; 15 | bottom: 0; 16 | left: 0; 17 | width: 100%; 18 | border-bottom: 3px solid $font-gold-color; 19 | color: #8d5940; 20 | } 21 | } 22 | 23 | &:hover { 24 | box-sizing: border-box; 25 | background: #38767b; 26 | transition: 0.2s; 27 | &:not(.selected) { 28 | // border-bottom: 3px solid $font-gold-color; 29 | background: #38767b; 30 | transition: 0.2s; 31 | } 32 | } 33 | &.selected { 34 | color: #8d5940; //选中的文字的颜色 35 | } 36 | } 37 | // &:not(.vertical):hover { 38 | // border-bottom: 0px solid $font-gold-color; 39 | // transition: 15s; 40 | // &::after { 41 | // content: ""; 42 | // position: absolute; 43 | // bottom: 0; 44 | // left: 0; 45 | // border-bottom: 3px solid $font-gold-color; 46 | // width: 100%; 47 | // } 48 | // } 49 | // 垂直的时候 50 | &.vertical { 51 | &.selected { 52 | &::before { 53 | content: ""; 54 | position: absolute; 55 | bottom: 0; 56 | left: 0; 57 | height: 100%; 58 | border-left: 5px solid $font-gold-color; 59 | } 60 | } 61 | &:hover { 62 | background: #38767b; 63 | transition: 0.2s; 64 | &:not(.selected) { 65 | border-left: 5px solid $font-gold-color; 66 | background: #38767b; 67 | transition: 0.2s; 68 | } 69 | } 70 | &.selected { 71 | color: #8d5940; //选中的文字的颜色 72 | } 73 | } 74 | } 75 | a { 76 | //链接的css 77 | color: inherit; 78 | text-decoration: none; 79 | } 80 | 81 | .emui-sub-nav .emui-nav-item:not(.vertical) { 82 | &.selected { 83 | color: $color; 84 | background: $normal-active-color 0.5; // 85 | &::after { 86 | display: none; 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/styles/progress.scss: -------------------------------------------------------------------------------- 1 | @import "./common/scss/color.scss"; 2 | .Big{ 3 | 4 | background-color:$warning-color; 5 | 6 | } 7 | .box{ 8 | 9 | background-color:$link-color; 10 | 11 | } 12 | .small{ 13 | height: 2px; 14 | } 15 | .large{ 16 | height: 5px; 17 | } -------------------------------------------------------------------------------- /src/styles/radio.scss: -------------------------------------------------------------------------------- 1 | //@import url(); 引入公共scss类 2 | @import "./common/scss/color.scss"; 3 | 4 | .radio { 5 | font-family: "jiangxizhuokai"; 6 | padding: 5px; 7 | display: inline-block; 8 | .emui-radio-primary { 9 | display: flex; 10 | align-items: center; 11 | .emui-radio { 12 | width: 20px; 13 | height: 20px; 14 | &__disabled--true{ 15 | cursor: not-allowed; 16 | } 17 | } 18 | .emui-radio-label { 19 | margin-left: 5px; 20 | vertical-align: middle; 21 | } 22 | .label-disabled{ 23 | color: #ccc; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/select.scss: -------------------------------------------------------------------------------- 1 | @import "./common/scss/color"; 2 | .v-enter, 3 | .v-leave-to{ 4 | opacity: 0; 5 | } 6 | .v-enter-active, 7 | .v-leave-active{ 8 | transition: all .8s; 9 | } 10 | .select { 11 | font-family: "jiangxizhuokai"; 12 | display: inline-block; 13 | .title { 14 | display: flex; 15 | justify-content: space-between; 16 | width: 200px; 17 | height: 30px; 18 | line-height: 30px; 19 | padding: 3px 10px; 20 | border: 2px solid $primary-color; 21 | border-radius: 5px; 22 | span { 23 | /* 一行显示，超长省略号 */ 24 | white-space: nowrap; 25 | overflow: hidden; 26 | text-overflow: ellipsis; 27 | } 28 | .placeholder{ 29 | color: #ccc; 30 | } 31 | } 32 | .options{ 33 | margin-top: 10px; 34 | position: absolute;; 35 | border-radius: 5px; 36 | z-index: 999; 37 | background-color: $background-color; 38 | &::before{ 39 | content: ''; 40 | position: absolute; 41 | display: block; 42 | border: 8px solid transparent; 43 | border-bottom-color: $background-color; 44 | top: -16px; 45 | left: 27px; 46 | z-index: inherit; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /src/styles/subnav.scss: -------------------------------------------------------------------------------- 1 | @import './common/scss/color.scss'; 2 | @import "./nav.scss"; 3 | 4 | .emui-sub-nav { 5 | color: $font-gold-color; 6 | font-family: "jiangxizhuokai"; 7 | position: relative; 8 | &-label { 9 | padding: 10px 20px; 10 | display: block; 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | } 15 | &-icon { 16 | transition: transform 250ms; 17 | display: inline-flex; 18 | margin-left: 20px; 19 | svg { 20 | fill: $primary-color; 21 | } 22 | &.vertical { 23 | transform: rotate(90deg); 24 | &.open { 25 | transform: rotate(270deg); 26 | } 27 | } 28 | 29 | &.open { 30 | transform: rotate(180deg); 31 | } 32 | } 33 | &:not(.vertical) { 34 | &.selected { 35 | &::after { 36 | transition: 0.2s; 37 | content: ""; 38 | position: absolute; 39 | bottom: 0; 40 | left: 0; 41 | border-bottom: 2px solid $font-gold-color; 42 | width: 100%; 43 | color: #8d5940; 44 | } 45 | } 46 | } 47 | 48 | //竖直的hover 49 | &.vertical { 50 | box-sizing: border-box; 51 | &:hover { 52 | transition: 0.3s; 53 | } 54 | &.selected { 55 | color: $blue; // 56 | } 57 | } 58 | &:not(.vertical) { 59 | margin-left: 2px; 60 | } 61 | 62 | &-popover { 63 | transition: 0.2s; 64 | 65 | background: $primary-color; 66 | position: absolute; 67 | top: 100%; 68 | left: 0; 69 | margin-top: 4px; 70 | white-space: nowrap; 71 | box-shadow: 0 0 3px fade_out(black, 0.8); 72 | border-radius: 3px; 73 | font-size: $font-size; 74 | color: $light-color; 75 | transition: height 250ms; 76 | min-width: 8em; 77 | &.vertical { 78 | //满足vertical时 79 | position: static; 80 | border-radius: 0; 81 | border: none; 82 | box-shadow: none; 83 | overflow: hidden; //可以遮挡还没出来的 div 达到隐藏的效果 84 | } 85 | } 86 | } 87 | 88 | // 子菜单的样式 89 | .emui-sub-nav .emui-sub-nav { 90 | &.active { 91 | &::after { 92 | content: ""; 93 | position: absolute; 94 | bottom: 0; 95 | left: 0; 96 | width: 100%; 97 | border-bottom: 3px solid $font-gold-color; 98 | display: none; 99 | } 100 | } 101 | .emui-sub-nav-popover { 102 | top: 0; 103 | left: 100%; 104 | // margin-left: 1px; 105 | } 106 | .emui-sub-nav-label { 107 | display: flex; 108 | align-items: center; 109 | justify-content: space-between; 110 | } 111 | 112 | .emui-sub-nav-icon { 113 | transition: transform 250ms; 114 | display: inline-flex; 115 | margin-left: 1em; 116 | svg { 117 | fill: $primary-color; 118 | } 119 | &.vertical { 120 | transform: rotate(90deg); 121 | &.open { 122 | transform: rotate(270deg); 123 | } 124 | } 125 | 126 | &.open { 127 | transform: rotate(180deg); 128 | } 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/styles/table.scss: -------------------------------------------------------------------------------- 1 | 2 | .table { 3 | width: 80%; 4 | position: relative; 5 | overflow: auto; 6 | font-family: "jiangxizhuokai"; 7 | .tableWrapper { 8 | &::-webkit-scrollbar { 9 | width: 4px; 10 | } 11 | &::-webkit-scrollbar-thumb { 12 | border-radius: 10px; 13 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 14 | opacity: 0.2; 15 | background: #c6eef0; 16 | } 17 | &::-webkit-scrollbar-track { 18 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 19 | border-radius: 0; 20 | } 21 | } 22 | .emui-table { 23 | width: 100%; 24 | border-collapse: collapse; 25 | border-spacing: 0; 26 | padding: 0; 27 | margin: 0; 28 | &.bordered { 29 | border: 1px solid #ccc; 30 | td, 31 | th { 32 | border: 1px solid #ccc; 33 | } 34 | } 35 | &.compact { 36 | td, 37 | th { 38 | padding: 4px; 39 | } 40 | } 41 | td, 42 | th { 43 | border-bottom: 1px solid #ccc; 44 | text-align: left; 45 | padding: 8px; 46 | box-sizing: border-box; 47 | } 48 | &.striped { 49 | thead{ 50 | >tr { 51 | background-color: #eff9fa; 52 | } 53 | } 54 | tbody { 55 | > tr { 56 | &:nth-child(odd) { 57 | background-color: #eff9fa; 58 | } 59 | &:nth-child(even) { 60 | background-color: #c6eef0; 61 | } 62 | } 63 | } 64 | } 65 | .table-column { 66 | display: flex; 67 | align-items: center; 68 | .table-sort { 69 | margin-left: 3px; 70 | display: inline-flex; 71 | flex-direction: column; 72 | justify-content: center; 73 | cursor: pointer; 74 | .iconfont { 75 | position: relative; 76 | font-size: 5px; 77 | color: #ccc; 78 | &:first-child { 79 | bottom: -2px; 80 | } 81 | &:nth-child(2) { 82 | top: -2px; 83 | } 84 | } 85 | .active { 86 | color: #333; 87 | } 88 | } 89 | } 90 | &-copy { 91 | position: absolute; 92 | top: 0; 93 | left: 0; 94 | width: 100%; 95 | background-color: #fff; 96 | } 97 | &-expend-icon{ 98 | margin-left: 5px; 99 | display: inline-block; 100 | transition: all .3s; 101 | &-active{ 102 | transform: rotate(90deg); 103 | } 104 | } 105 | &-center{ 106 | text-align: center !important; 107 | } 108 | } 109 | .table-loading { 110 | position: absolute; 111 | width: 100%; 112 | height: 100%; 113 | top: 0; 114 | left: 0; 115 | display: flex; 116 | justify-content: center; 117 | align-items: center; 118 | background-color: rgba(255, 255, 255, 0.6); 119 | span { 120 | font-size: 20px; 121 | @include spin; 122 | } 123 | } 124 | } -------------------------------------------------------------------------------- /src/styles/tag.scss: -------------------------------------------------------------------------------- 1 | 2 | .emui-tag{ 3 | display: inline-flex; 4 | align-items: center; 5 | height: 32px; 6 | line-height: 32px; 7 | padding: 0 15px; 8 | margin: 10px; 9 | background-color: #ecf5ff; 10 | border-radius: 5px; 11 | border: 1px solid #d9ecff; 12 | font-size: 12px; 13 | font-family: "jiangxizhuokai"; 14 | color: #409eff; 15 | &-success{ 16 | background-color: #f0f9eb; 17 | color:#67c23a; 18 | } 19 | &-info{ 20 | background-color: #f4f4f5; 21 | color: #909399; 22 | } 23 | &-warning{ 24 | background-color: #fdf6ec; 25 | color: #e6b4c4; 26 | } 27 | &-danger{ 28 | background-color: #fef0f0; 29 | color: #f56c6c; 30 | } 31 | .iconfont{ 32 | vertical-align: middle; 33 | width: 20px; 34 | height: 20px; 35 | line-height: 20px; 36 | font-size: 18px; 37 | position: relative; 38 | top: 1px; 39 | right: -5px; 40 | &:hover{ 41 | cursor: pointer; 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/styles/totalnav.scss: -------------------------------------------------------------------------------- 1 | @import './common/scss/color.scss'; 2 | @import "./nav.scss"; 3 | 4 | .emui-nav { 5 | background: $primary-color; 6 | display: flex; 7 | border-bottom: 1px solid $grey; 8 | color: $color; 9 | cursor: default; 10 | user-select: none; 11 | &.vertical { 12 | flex-direction: column; 13 | border-right: 1px solid $grey; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/utils/checkone.js: -------------------------------------------------------------------------------- 1 | //校验是否传入props 2 | export function check(value, validList) { 3 | for (let i = 0; i < validList.length; i++) { 4 | if (value === validList[i]) { 5 | return true; 6 | } 7 | } 8 | return false; 9 | } -------------------------------------------------------------------------------- /tests/unit/button.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import button from "@/components/Button"; 6 | describe('test ToDoList', done => { 7 | it('test type', () => { 8 | const wrapper = shallowMount(button, { 9 | propsData: { 10 | type: "primarygold" 11 | } 12 | }) 13 | expect(wrapper.find('.emui-button--primarygold').exists()).toBe(true); 14 | }), 15 | it('test round', () => { 16 | const wrapper = shallowMount(button, { 17 | propsData: { 18 | round: "round" 19 | } 20 | }) 21 | expect(wrapper.find('.round').exists()).toBe(true); 22 | }) 23 | 24 | }) 25 | 26 | 27 | 28 | 29 | 30 | 31 | // it('size large',done=>{ 32 | // const wrapper =shallowMount(input,{ 33 | // propsData: { 34 | // size: "large" 35 | // } 36 | // }) 37 | // expect(wrapper.find('.emui-input__size-large').exists()).toBe(true); 38 | // done() 39 | // }), 40 | -------------------------------------------------------------------------------- /tests/unit/checkbox.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import checkbox from "@/components/CheckBox" 6 | 7 | describe('emui-checkbox',()=>{ 8 | it('disabled true',done=>{ 9 | const wrapper=shallowMount(checkbox,{ 10 | propsData:{ 11 | disabled:true 12 | } 13 | }) 14 | expect(wrapper.find('.label-disabled').exists()).toBe(true); 15 | done(); 16 | }), 17 | it('radiogroup vertcial true',done=>{ 18 | const wrapper=shallowMount(checkbox.item,{ 19 | propsData: { 20 | vertical:true 21 | } 22 | }) 23 | expect(wrapper.find('.is-vertical').exists()).toBe(true); 24 | done(); 25 | }) 26 | }) -------------------------------------------------------------------------------- /tests/unit/dialog.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import dialog from "@/components/dialog"; 6 | describe('test ToDoList', done => { 7 | it('test title', () => { 8 | const wrapper = shallowMount(dialog, { 9 | propsData: { 10 | title: "emui hello world" 11 | } 12 | }) 13 | expect(wrapper.html()).toContain('emui hello world') 14 | }) 15 | 16 | }) 17 | -------------------------------------------------------------------------------- /tests/unit/icon.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import Icon from "@/components/Icon"; 6 | 7 | describe('test ToDoList', () => { 8 | it('test name', () => { 9 | const wrapper = shallowMount(Icon, { 10 | propsData: { 11 | width: "100px", 12 | height: "100px" 13 | } 14 | }) 15 | expect(wrapper.find('.emui-icon').exists()).toBe(true) 16 | 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /tests/unit/input.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import input from "@/components/Input"; 6 | 7 | describe('emui-input',()=>{ 8 | it('size large',done=>{ 9 | const wrapper =shallowMount(input,{ 10 | propsData: { 11 | size: "large" 12 | } 13 | }) 14 | expect(wrapper.find('.emui-input__size-large').exists()).toBe(true); 15 | done() 16 | }), 17 | it('disabled true',done=>{ 18 | const wrapper =shallowMount(input,{ 19 | propsData: { 20 | disabled:true 21 | } 22 | }) 23 | expect(wrapper.find('.emui-input__disabled-true').exists()).toBe(true); 24 | done() 25 | }) 26 | 27 | }) -------------------------------------------------------------------------------- /tests/unit/link.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import Link from "@/components/Link/link"; 6 | 7 | // 测试是否激活 8 | describe('test ToDoList', () => { 9 | it('test type', () => { 10 | const wrapper = shallowMount(Link, { 11 | propsData: { 12 | type: 'default', 13 | disabled: true 14 | } 15 | }) 16 | expect(wrapper.find('.emui-link--default').exists()).toBe(true) 17 | expect(wrapper.find('.disabled').exists()).toBe(true) 18 | 19 | }) 20 | 21 | }) 22 | -------------------------------------------------------------------------------- /tests/unit/nav.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import Nav from "@/components/Nav"; 6 | 7 | // 测试是否激活 8 | describe('test ToDoList', () => { 9 | it('test name', () => { 10 | const wrapper = shallowMount(Nav, { 11 | propsData: { 12 | vertical: true 13 | } 14 | }) 15 | expect(wrapper.find('.vertical').exists()).toBe(true) 16 | 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /tests/unit/radio.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import radio from "@/components/Radio" 6 | 7 | describe('emui-radio',()=>{ 8 | it('props label',done=>{ 9 | const wrapper =shallowMount(radio,{ 10 | propsData:{ 11 | label:'上海' 12 | } 13 | }) 14 | expect(wrapper.find('.emui-radio').element.value).toBe('上海'); 15 | done() 16 | }), 17 | it('radio disabled true',done=>{ 18 | const wrapper =shallowMount(radio,{ 19 | propsData: { 20 | disabled:true 21 | } 22 | }) 23 | expect(wrapper.find('.emui-radio__disabled--true').exists()).toBe(true); 24 | done() 25 | }), 26 | it('radiogroup vertcial true',done=>{ 27 | const wrapper=shallowMount(radio.item,{ 28 | propsData: { 29 | vertical:true 30 | } 31 | }) 32 | expect(wrapper.find('.is-vertical').exists()).toBe(true); 33 | done(); 34 | }) 35 | }) -------------------------------------------------------------------------------- /tests/unit/select.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import select from "@/components/Select" 6 | describe('emui-select',()=>{ 7 | it('select showoption',async ()=>{ 8 | const wrapper=shallowMount(select,{ 9 | data(){ 10 | return { 11 | isShowoption: false 12 | } 13 | } 14 | }) 15 | await wrapper.find('.iconfont').trigger('click'); 16 | expect(wrapper.vm.isShowoption).toBe(true) 17 | }) 18 | }) -------------------------------------------------------------------------------- /tests/unit/switch.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | import { shallowMount } from '@vue/test-utils' 5 | import Switch from "@/components/Switch"; 6 | 7 | // 测试是否激活 8 | describe('test ToDoList', () => { 9 | it('test name', () => { 10 | const wrapper = shallowMount(Switch, { 11 | propsData: { 12 | value: true 13 | } 14 | }) 15 | expect(wrapper.find('.is-checked').exists()).toBe(true) 16 | 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | } -------------------------------------------------------------------------------- /使用文档.txt: -------------------------------------------------------------------------------- 1 | Tag： 2 | 3 | size有三种值可以选，default，large，small 4 | type:{type:String,default:'success'}, 5 | type 有四种值可以选success/info/warning/danger，对应四种颜色 6 | closable选择是否有关闭按钮 7 | hit选择是否有边框 8 | 9 | effect：dark / light / plain亮暗程度 10 | round：是否为圆形 11 | （分类的时候组合比较多，只实现了其中的部分，我写了几个测试） 12 | progress： 13 | size：选择large或者small 14 | progress：绑定加载的进度百分比 --------------------------------------------------------------------------------