diff --git a/components.json b/components.json index c508e2174..624ba63fa 100644 --- a/components.json +++ b/components.json @@ -151,5 +151,8 @@ ], "card": [ "./packages/card/index.js" + ], + "rate": [ + "./packages/rate/index.js" ] } diff --git a/examples/docs/rate.md b/examples/docs/rate.md new file mode 100644 index 000000000..b7c5fa4e1 --- /dev/null +++ b/examples/docs/rate.md @@ -0,0 +1,91 @@ + + +## 基础用法 + +
+ +
+ +``` html + +``` + +## 区分颜色 + +利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。 + +
+ +
+ +``` html + +``` + +## 辅助文字 + +为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。 + +
+ +
+ +``` html + +``` + +## 其他 icon + +
+ +
+ +``` html + +``` + +## 只读 +为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。 + +
+ +
+ +``` html + +``` +## Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------- |---------- |------------- |-------- | +| v-model | 绑定值 | Number | | 0 | +| max | 最大分值 | Number | | 5 | +| multi-color | 是否根据分数等级区分颜色 | Boolean | | false | +| lowThreshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 | +| highThreshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 | +| smiley | 是否使用 smiley icon | Boolean | | false | +| disabled | 是否为只读 | Boolean | | false | +| show-text | 是否显示辅助文字 | Boolean | | false | +| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] | +| text-template | 只读时的辅助文字模板 | String | | '{value}' | + +## Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| change | 分值改变时触发 | 改变后的分值 | + diff --git a/examples/nav.config.json b/examples/nav.config.json index 6ac5a360d..80f04002d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -178,6 +178,11 @@ "name": "滑块 (slider)", "title": "slider 滑块", "description": "通过拖动滑块在一个固定区间内进行选择" + }, + { + "path": "/rate", + "name": "评分 (rate)", + "title": "评分组件" } ] }, diff --git a/packages/rate/cooking.conf.js b/packages/rate/cooking.conf.js new file mode 100644 index 000000000..6de801ab0 --- /dev/null +++ b/packages/rate/cooking.conf.js @@ -0,0 +1,31 @@ +var cooking = require('cooking'); +var path = require('path'); + +cooking.set({ + entry: { + index: path.join(__dirname, 'index.js') + }, + dist: path.join(__dirname, 'lib'), + template: false, + format: 'umd', + moduleName: 'ElRate', + extractCSS: 'style.css', + + extends: ['vue', 'saladcss'] +}); + +cooking.add('resolve.alias', { + 'main': path.join(__dirname, '../../src'), + 'packages': path.join(__dirname, '../../packages') +}); + +cooking.add('externals', { + vue: { + root: 'Vue', + commonjs: 'vue', + commonjs2: 'vue', + amd: 'vue' + } +}); + +module.exports = cooking.resolve(); diff --git a/packages/rate/fonts/icomoon.eot b/packages/rate/fonts/icomoon.eot new file mode 100755 index 000000000..0ddab8f5a Binary files /dev/null and b/packages/rate/fonts/icomoon.eot differ diff --git a/packages/rate/fonts/icomoon.svg b/packages/rate/fonts/icomoon.svg new file mode 100755 index 000000000..891b6d6fb --- /dev/null +++ b/packages/rate/fonts/icomoon.svg @@ -0,0 +1,19 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/rate/fonts/icomoon.ttf b/packages/rate/fonts/icomoon.ttf new file mode 100755 index 000000000..1ee63597a Binary files /dev/null and b/packages/rate/fonts/icomoon.ttf differ diff --git a/packages/rate/fonts/icomoon.woff b/packages/rate/fonts/icomoon.woff new file mode 100755 index 000000000..1cfafd087 Binary files /dev/null and b/packages/rate/fonts/icomoon.woff differ diff --git a/packages/rate/index.js b/packages/rate/index.js new file mode 100644 index 000000000..ca7d3d916 --- /dev/null +++ b/packages/rate/index.js @@ -0,0 +1,7 @@ +const Rate = require('./src/main'); + +Rate.install = function(Vue) { + Vue.component(Rate.name, Rate); +}; + +module.exports = Rate; diff --git a/packages/rate/package.json b/packages/rate/package.json new file mode 100644 index 000000000..111d54f7d --- /dev/null +++ b/packages/rate/package.json @@ -0,0 +1,15 @@ +{ + "name": "el-rate", + "version": "0.0.0", + "description": "A rate component for Vue.js.", + "keywords": [ + "element", + "vue", + "component" + ], + "main": "./lib/index.js", + "repository": "https://github.com/element-component/element/tree/master/packages/rate", + "author": "elemefe", + "license": "MIT", + "dependencies": {} +} diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue new file mode 100644 index 000000000..3dcda2697 --- /dev/null +++ b/packages/rate/src/main.vue @@ -0,0 +1,241 @@ + + + diff --git a/packages/rate/style.css b/packages/rate/style.css new file mode 100755 index 000000000..7e2a7e106 --- /dev/null +++ b/packages/rate/style.css @@ -0,0 +1,60 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?q2cz0t'); + src: url('fonts/icomoon.eot?q2cz0t#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?q2cz0t') format('truetype'), + url('fonts/icomoon.woff?q2cz0t') format('woff'), + url('fonts/icomoon.svg?q2cz0t#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-rate-face-void:before { + content: "\e900"; +} +.icon-rate-face-gray .path1:before { + content: "\e901"; + color: rgb(192, 204, 218); +} +.icon-rate-face-gray .path2:before { + content: "\e902"; + color: rgb(132, 146, 166); +} +.icon-rate-face-yellow .path1:before { + content: "\e903"; + color: rgb(247, 186, 42); +} +.icon-rate-face-yellow .path2:before { + content: "\e904"; + color: rgb(172, 110, 2); +} +.icon-rate-face-orange .path1:before { + content: "\e905"; + color: rgb(255, 153, 0); +} +.icon-rate-face-orange .path2:before { + content: "\e906"; + color: rgb(173, 101, 0); +} +.icon-rate-star-void:before { + content: "\e907"; +} +.icon-rate-star:before { + content: "\e908"; +} + diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 9076f7924..57429fc72 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -33,3 +33,4 @@ @import "./col.css"; @import "./spinner.css"; @import "./card.css"; +@import "./rate.css"; diff --git a/packages/theme-default/src/rate.css b/packages/theme-default/src/rate.css new file mode 100644 index 000000000..758e2d68f --- /dev/null +++ b/packages/theme-default/src/rate.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b rate { + height: 20px; + @e item { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; + } + + @e icon { + position: relative; + display: inline-block; + font-size: 18px; + margin-right: 6px; + color: #C6D1DE; + &.hover { + transform: scale(1.1); + } + + .path2 { + position: absolute; + left: 0; + top: 0; + } + } + + @e decimal { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; + } + + @e text { + font-size: 14px; + vertical-align: middle; + } + } +} diff --git a/src/index.js b/src/index.js index fb956bc4f..5505492c2 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,8 @@ import Upload from '../packages/upload/index.js'; import Progress from '../packages/progress/index.js'; import Spinner from '../packages/spinner/index.js'; import Message from '../packages/message/index.js'; +import Card from '../packages/card/index.js'; +import Rate from '../packages/rate/index.js'; const install = function(Vue) { if (install.installed) return; @@ -99,6 +101,8 @@ const install = function(Vue) { Vue.component(Progress.name, Progress); Vue.component(Spinner.name, Spinner); Vue.component(Message.name, Message); + Vue.component(Card.name, Card); + Vue.component(Rate.name, Rate); Vue.use(Loading); @@ -166,5 +170,7 @@ module.exports = { Upload, Progress, Spinner, - Message + Message, + Card, + Rate };