需求
重构Tag组件
任务列表
Tag属性
type
类型
success/info/warning/danger
closable
是否可关闭
disable-transitions
是否禁用渐变动画
hit
是否有边框描边
color
背景色
size
尺寸
medium / small / mini
effect
主题
dark / light / plain
tag时间
click
点击 Tag 时触发的事件
close
关闭 Tag 时触发的事件
props属性type实现
测试
describe('Tag.vue', () => { it('type property', () => { const wrapper = mount(Tag) expect(wrapper.classes()).toContain('el-tag--info') }) it('type property is valitate', () => { const wrapper = mount(Tag, { props: { type: 'success' } }) expect(wrapper.classes()).toContain('el-tag--success') })})
代码实现
<script>export default { name: 'ElTag', componentName: 'ElTag', props: { type: { type: String, default: 'info', validator(val) { return ['success', 'warning', 'info', 'error'].includes(val) } } }, render() { const classes = ['el-tag', this.type ? `el-tag--${this.type}` : ''] return ( <span class={classes}> <span></span> </span> ) }}</script>
props属性size实现
测试
describe('property size', () => { it('size', () => { const wrapper = mount(Tag, { props: { size: 'mini' } }) expect(wrapper.classes()).toContain('el-tag--mini') }) it('size is undefined', () => { const wrapper = mount(Tag) expect(wrapper.classes()).toHaveLength(2) })})
代码实现
<script>export default { name: 'ElTag', componentName: 'ElTag', props: { type: { type: String, default: 'info', validator(val) { return ['success', 'warning', 'info', 'error'].includes(val) } }
size: { type: String, validator(val) { return ['medium', 'small', 'mini'].includes(val) } }, }, render() { const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '', this.size ? `el-tag--${this.size}` : '' ] return ( <span class={classes}> <span></span> </span> ) }}</script>
props属性hit实现
测试
describe('property hit', () => { it('hit is false', () => { const wrapper = mount(Tag, { props: { hit: true } }) expect(wrapper.classes('is-hit')).toBeTruthy() })})
代码实现
<script>import { toRefs, computed } from 'vue'export default { name: 'ElTag', componentName: 'ElTag', props: { type: { type: String, default: 'info', validator(val) { return ['success', 'warning', 'info', 'error'].includes(val) } }, size: { type: String, validator(val) { return ['medium', 'small', 'mini'].includes(val) } }, hit: { type: Boolean, default: false } }, render() { const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '', this.size ? `el-tag--${this.size}` : '', this.hit && 'is-hit' ] return ( <span class={classes}> <span></span> </span> ) }}</script>
props属性effect实现
测试
describe('property effect', () => { // dark', 'light', 'plain it('effect', () => { const wrapper = mount(Tag, { props: { effect: 'dark' } }) expect(wrapper.classes()).toContain('el-tag--dark') }) it('effect is undefined', () => { const wrapper = mount(Tag) expect(wrapper.classes()).toHaveLength(2) }) })
代码实现
<script>import { toRefs, computed } from 'vue'export default { name: 'ElTag', componentName: 'ElTag', props: { type: { type: String, default: 'info', validator(val) { return ['success', 'warning', 'info', 'error'].includes(val) } }, size: { type: String, validator(val) { return ['medium', 'small', 'mini'].includes(val) } }, effect: { type: String, validator(val) { return ['dark', 'light', 'plain'].includes(val) } }, hit: { type: Boolean, default: false } }, render() { const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '', this.size ? `el-tag--${this.size}` : '', this.effect ? `el-tag--${this.effect}` : '', this.hit && 'is-hit' ] return ( <span class={classes}> <span></span> </span> ) }}</script>
