医疗网站建设需要什么资质,免费的网络营销方式有哪些,做那种网站受欢迎,企业网站建设专业的我的icepro参考地址,内有参考代码,有条件的割割点点star 实现要求: 基于vue3支持通过colors(更改颜色)支持点击事件…支持其他的自定义样式(例如圆角,size等等) 最基础的第一步: 父组件引入并使用:
templatediv classbuttonLim我的按钮:ice-b…我的icepro参考地址,内有参考代码,有条件的割割点点star 实现要求: 基于vue3支持通过colors(更改颜色)支持点击事件…支持其他的自定义样式(例如圆角,size等等) 最基础的第一步: 父组件引入并使用:
templatediv classbuttonLim我的按钮:ice-buttonprimary/ice-button/div
/template
script setup
import IceButton from ../../components/other/ice-button.vue
/script
style scoped langless
/style子组件中使用slot去展示:
templatediv classice-buttonslot/slot/div
/template
script setup
/script
style scoped langless
/stylerun: 那么,把它的样式改的好看一些: 父组件:
templatediv classbuttonLim我的按钮:ice-buttonprimary/ice-button/div
/templatescript setup
import IceButton from ../../components/other/ice-button.vue/scriptstyle scoped langless
.buttonLim {display: flex;justify-content: center;flex-direction: column;align-items: center;
}
/style子组件:
templatediv classice-buttonslot/slot/div
/templatescript setup/scriptstyle scoped langless
.ice-button {border-radius: .3rem;border: rgba(0, 0, 0, .7) 1px solid;background: rgba(0, 0, 0, .2);width: fit-content;padding: .2rem .4rem;margin: .1rem .2rem;user-select: none;
}/style 当然,此时他的颜色并不够好看,那么如果想通过props向子组件自定义颜色: 子组件:
templatediv classice-buttonslot/slot/div
/templatescript setup
const props defineProps({color: {type: String,default: }
})
/script这样你传过来了,但是想怎么用呢, 这里要求颜色有未hover时的颜色和hover时的颜色,hover时的颜色自动计算出来 而此时可以考虑使用到css的变量了,像是: 子组件:
templatediv classice-button:class[color?hoverColor:defaultColor]:style{ --color: color,--hover-color: hoverColor(color) }slot/slot/div
/templatescript setup
const props defineProps({color: {type: String,default: }
})
const hoverColor (rgb) {return rgb.replaceAll(), ,.5))
}
/scriptstyle scoped langless
.ice-button {border-radius: .3rem;width: fit-content;padding: .2rem .4rem;margin: .1rem .2rem;user-select: none;transition-duration: .3s;
}.defaultColor {border: rgba(0, 0, 0, .7) 1px solid;background: rgba(0, 0, 0, .2);
}.hoverColor {color: var(--color);border: var(--color) 1px solid;:hover {color: var(--hover-color);border: var(--hover-color) 1px solid;}
}
/style父组件的调用:
templatediv classbuttonLim我的按钮:ice-button colorrgb(251, 139, 5)primary/ice-buttonice-button colorrgb(234, 137, 88)primary/ice-button/div
/templatescript setup
import IceButton from ../../components/other/ice-button.vue/scriptstyle scoped langless
.buttonLim {display: flex;justify-content: center;flex-direction: column;align-items: center;
}
/stylerun: 解释一下: 子组件中,如果传入了color的值,那么子组件的类名hoverColor生效,反之defaultColor生效,这里是给class传入了一个数组,如果你查看elementui的源码,会发现他们也是这样实现组件的type的切换,用过了才知道这个技巧是如此好用
还有,这里只是传入了一个rgb的值,然后在子组件中自动计算出来另一个颜色值(直接改为rgba,opacity为0.5) 支持点击事件 如果你直接使用下面的方式来绑定: 父组件:
templatediv classbuttonLim我的按钮:ice-button colorrgb(251, 139, 5)primary/ice-buttonice-button colorrgb(234, 137, 88)primary/ice-buttonice-button clickclickTrigger colorrgb(242, 72, 27) refbtnclick/ice-button/div
/templatescript setup
import IceButton from ../../components/other/ice-button.vue
import { ref } from vueconst btn ref()
const clickTrigger async () {console.log(clickTrigger---)const str 我即将要赋值的文字if (await copyText(str)) {console.log(success)} else {console.log(error)}
}const copyText function (str) {return navigator.clipboard.writeText(str).then(() {return true}).catch(() {return false})
}/scriptstyle scoped langless
.buttonLim {display: flex;justify-content: center;flex-direction: column;align-items: center;
}
/style
子组件:
templatediv classice-button:class[color?hoverColor:defaultColor]:style{ --color: color,--hover-color: hoverColor(color) }slot/slot/div
/templatescript setup
const props defineProps({color: {type: String,default: }
})
const hoverColor (rgb) {return rgb.replaceAll(), ,.5))
}
/scriptstyle scoped langless
.ice-button {border-radius: .3rem;width: fit-content;padding: .2rem .4rem;margin: .1rem .2rem;user-select: none;transition-duration: .3s;
}.defaultColor {border: rgba(0, 0, 0, .7) 1px solid;background: rgba(0, 0, 0, .2);
}.hoverColor {color: var(--color);border: var(--color) 1px solid;:hover {color: var(--hover-color);border: var(--hover-color) 1px solid;}
}
/style这样没问题可以,但是有时会报错,click不是原生事件,这里我没有复现,淡然,你也可以在复习bug的时候想起这篇文章
这里的逻辑是点击左侧的item,赋值文字,但是这里的子组件没有定义click的处理事件,上面的button也是,可能会报这种错,
如何解决:
在子组件中定义click事件: 子组件:
templatediv classice-buttonclickclickCallBack:class[color?hoverColor:defaultColor]:style{ --color: color,--hover-color: hoverColor(color) }slot/slot/div
/templatescript setup
const props defineProps({color: {type: String,default: }
})
const hoverColor (rgb) {return rgb.replaceAll(), ,.5))
}const emit defineEmits([click])
const clickCallBack (evt) {emit(click, evt)
}
/scriptstyle scoped langless
.ice-button {border-radius: .3rem;width: fit-content;padding: .2rem .4rem;margin: .1rem .2rem;user-select: none;transition-duration: .3s;
}.defaultColor {border: rgba(0, 0, 0, .7) 1px solid;background: rgba(0, 0, 0, .2);
}.hoverColor {color: var(--color);border: var(--color) 1px solid;:hover {color: var(--hover-color);border: var(--hover-color) 1px solid;}
}
/style这里的clickCallBack接收并emit一下click事件 emit函数会触发父组件绑定的click事件。当用户点击按钮时父组件会接收到这个事件并执行相应的操作。 自定义圆角 这里其实还是使用props来自定义圆角,例如我实现下面几个(round和block)按钮: 父组件的调用: 自定义圆角:ice-button roundround/ice-buttonice-button blockblock/ice-button子组件:
templatediv classice-buttonclickclickCallBack:class[color?hoverColor:defaultColor,round?round:,block?block:]:style{ --color: color,--hover-color: hoverColor(color) }slot/slot/div
/templatescript setup
const props defineProps({color: {type: String,default: },round: {type: Boolean,default: false},block: {type: Boolean,default: false}
})
const hoverColor (rgb) {return rgb.replaceAll(), ,.5))
}const emit defineEmits([click])
const clickCallBack (evt) {emit(click, evt)
}
/scriptstyle scoped langless
.ice-button {border-radius: .3rem;width: fit-content;padding: .2rem .4rem;margin: .1rem .2rem;user-select: none;transition-duration: .3s;
}.defaultColor {border: rgba(0, 0, 0, .7) 1px solid;color: rgba(0, 0, 0, .7);transition-duration: .3s;:hover {color: rgba(0, 0, 0, .4);border: rgba(0, 0, 0, .4) 1px solid;}
}.hoverColor {color: var(--color);border: var(--color) 1px solid;:hover {color: var(--hover-color);border: var(--hover-color) 1px solid;}
}.round {border-radius: 2rem;
}.block {border-radius: 0;
}
/style当然,也可以混合使用: ice-button block colorrgb(242, 72, 27)混合/ice-button以上说的功能能都实现了 注意这里的代码还有很多没有优化,颜色获取,其他自定义type之类的都没有处理,关于更多的细节优化,详见icepro
