造轮子-toast组件的实现(下)
1.解决 toast 中传入 html 的问题,通过假的 slot 来实现 // plugins.js toast.$slots.default = [message] // toast.vue <div v-html="$slots.default[0]"></div> // 使用 created() { this.$toast('<p>我是<strong>hi</strong></p>',{}) }, 2.在 toast 中加 html 是比较危险的一个动作,所以要加一个选项默认不开启。 // toast.vue <slot v-if="!enableHtml"></slot> <div v-else v-html="$slots.default[0]"></div> // plugin.js,进行传递参数的改写 propsData:toastOptions // 使用 created() { this.$toast('<p>我是<strong>hi</strong></p><a href="http://qq.com">qq</a>',{ enableHtml: false }) }, 3.flex-shrink的使用,flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 .item { flex-shrink: <number>; /*