典型组件实现 · 要努力

## extend案例—**notification** MessageBox组件源码 https://www.jianshu.com/p/929deba025bf elementUI源码中 loading、message、notification都使用到了Vue.extend() 1，先创建一个组件，也就是弹窗的Dom结构样式以及需要用的数据等； 2-1，再创建一个js文件，引入刚刚创建的组件； 2-2，利用Vue.extend()构造一个子类实例，然后把包装的数据和方法传进去； 2-3，调用$mount()方法生成需要的DOM，然后插入body中，这样就可以通过 $el 属性来访问组件实例 ```js const NotificationConstructor = Vue.extend(Main); instance = new NotificationConstructor({ data: options }); instance.$mount(); document.body.appendChild(instance.$el); instance.dom = instance.$el; instance.dom.style.zIndex = PopupManager.nextZIndex(); ``` 3，将第二步的方法挂载到Vue原型上，以保证在项目中可以直接调用：Vue.prototype.$notify = Notification; 4，使用：this.$notify({ title: '提示', message: '这是一条消息' }); ## **ToolTip** ```javascript // 对 el-tooltip 进行二次封装：文本溢出显示省略号 <template>  <el-tooltip :content="content" :disabled="!overflow" effect="dark" placement="top-start"> <span class="custom-tool-tip" @mouseover="judgeOverflow" @click="operation"> {{ content }} <slot></slot> </span> </el-tooltip> </template> <script> export default { props: { content: { type: String || undefined, required: true, default: '' } }, data () { return { overflow: false } }, methods: { judgeOverflow (event) { const el = event.target const range = document.createRange() range.setStart(el, 0) range.setEnd(el, el.childNodes.length) // getBoundingClientRect获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置 const rangeWidth = range.getBoundingClientRect().width const padding = parseInt(getComputedStyle(el, null).paddingLeft) + parseInt(getComputedStyle(el, null).paddingRight) // offsetWidth只读属性，像素宽度，包含padding和border，不包含margin if ((rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth)) { this.overflow = true return } this.overflow = false }, operation () { this.$emit('operation') } } } </script> <style lang='scss' scoped> .custom-tool-tip { display: inline-block; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> ```