├── .DS_Store
├── README.md
├── 代码编辑器组件
    ├── CodeEditor.vue
    └── README.md
├── 弹出层confirm确认
    ├── README.md
    └── noSave.vue
├── 弹出错误提示几秒消失
    ├── README.md
    └── confirmFindErrorAlert.vue
├── 评价星级组件
    ├── README.md
    └── starChange.vue
└── 防删除的页面水印组件
    ├── README.md
    └── waterMark.vue


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwenj/public-component/7d5af28c7bb065b87e7dc80fc8e07726e0e0a72f/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 小组件库
2 | - 整理平时编写，可复用的小组件
3 | ### 要求
4 | - 代码精炼，编写规范
5 | - 数据通信，灵活性大，耦合性低，适应范围广


--------------------------------------------------------------------------------
/代码编辑器组件/CodeEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="code-editor">
 3 |     <codemirror v-model="code" :options="cmOptions" style="width:100%;height:100%"></codemirror>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import { codemirror } from 'vue-codemirror'
 8 | import 'codemirror/lib/codemirror.css'
 9 | // 编辑器语言，暂时只引入.yaml，如需使用更多语言需要先引入相应的js文件
10 | import 'codemirror/mode/yaml/yaml.js'
11 | // 编辑器主题，使用更多主题需引入相应的css文件
12 | import 'codemirror/theme/base16-light.css'
13 | // 光标，当前行高亮
14 | import 'codemirror/addon/selection/active-line.js'
15 | // 自动关闭括号引号
16 | import 'codemirror/addon/edit/closebrackets.js'
17 | export default {
18 |   components: {
19 |     codemirror
20 |   },
21 |   props: {
22 |     //  编辑语言
23 |     codeType: {
24 |       type: String,
25 |       default: 'text/x-yaml'
26 |     },
27 |     // 编辑器主题
28 |     codeTheme: {
29 |       type: String,
30 |       default: 'base16-light'
31 |     },
32 |     // 编辑器传入文本
33 |     codeText: {
34 |       type: String,
35 |       default: ''
36 |     },
37 |     // 编辑器是否设为只读模式，true为只读
38 |     readOnly: {
39 |       type: Boolean,
40 |       default: false
41 |     }
42 |   },
43 |   data() {
44 |     return {
45 |       code: '',
46 |       //  更多相关配置https://codemirror.net/doc/manual.html#config
47 |       cmOptions: {
48 |         autoCloseBrackets: true, // 自动关闭括号引号
49 |         styleActiveLine: true, // 光标当前行高亮
50 |         lineNumbers: true, // 显示呢行号
51 |         line: true,
52 |         mode: this.codeType,
53 |         theme: this.codeTheme,
54 |         readOnly: this.readOnly // 只读
55 |       },
56 |       timer: null
57 |     }
58 |   },
59 |   watch: {
60 |     readOnly(newval) {
61 |       this.cmOptions.readOnly = newval
62 |     },
63 |     //   接受外部传入文本展示在编辑器内
64 |     codeText: {
65 |       handler(newval) {
66 |         if (this.code !== newval) {
67 |           this.code = newval
68 |         }
69 |       },
70 |       immediate: true
71 |     },
72 |     // 编辑器被改变时，对父触发事件传递改变后的文本，500ms防抖
73 |     code(newval) {
74 |       if (this.timer) {
75 |         clearTimeout(this.timer)
76 |       }
77 |       this.timer = setTimeout(() => {
78 |         this.$emit('codeChangeEmit', newval)
79 |       }, 500)
80 |     }
81 |   }
82 | }
83 | </script>
84 | <style lang="scss" scoped>
85 | .code-editor {
86 |   width: 100%;
87 |   height: 100%;
88 | }
89 | </style>
90 | <style lang="scss">
91 | .code-editor {
92 |   .CodeMirror {
93 |     height: 100%;
94 |   }
95 | }
96 | </style>
97 | 
98 | 


--------------------------------------------------------------------------------
/代码编辑器组件/README.md:
--------------------------------------------------------------------------------
 1 | ## 代码编辑器
 2 | - 基于`vue-codemirror`，简单封装加代码编辑器组件
 3 | - ```javascript
 4 |     props: {
 5 |       //  编辑语言
 6 |       codeType: {
 7 |         type: String,
 8 |         default: 'text/x-yaml'
 9 |       },
10 |       // 编辑器主题
11 |       codeTheme: {
12 |         type: String,
13 |         default: 'base16-light'
14 |       },
15 |       // 编辑器传入文本
16 |       codeText: {
17 |         type: String,
18 |         default: ''
19 |       },
20 |       // 编辑器是否设为只读模式，true为只读
21 |       readOnly: {
22 |         type: Boolean,
23 |         default: false
24 |       }
25 |     },
26 |   ```
27 |   - 提供编辑器的语言，编辑器的主题，传入文本和是否只读接口
28 |   - 用户改变输入内容后会返回emit，传递当前修改内容
29 |   - 编辑器宽高随外部DOM一致
30 | 


--------------------------------------------------------------------------------
/弹出层confirm确认/README.md:
--------------------------------------------------------------------------------
1 | - 传递confirmText参数为弹出确认信息等，
2 | - 父组件直接通过$refs调用confirmShow()函数显示组件
3 | - 点击确认父组件返回一个select自定义事件


--------------------------------------------------------------------------------
/弹出层confirm确认/noSave.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition name="confirm-fade">
  3 |         <div class="confirm" v-show="showFlag" @click.stop>
  4 |             <div class="confirm-wrapper">
  5 |                 <div class="confirm-content">
  6 |                     <h2>{{ confirmText }}</h2>
  7 |                     <p>是否确认放弃？</p>
  8 |                     <div class="operate">
  9 |                         <button @click="toNext" class="operate-btn left">确认</button>
 10 |                         <button @click="toBack" class="operate-btn">取消</button>
 11 |                     </div>
 12 |                 </div>
 13 |             </div>
 14 |         </div>
 15 |     </transition>
 16 | </template>
 17 | 
 18 | <script type="text/ecmascript-6">
 19 | /**
 20 |  *传递confirmText参数为弹出确认信息等，
 21 |  *父组件直接通过$refs调用confirmShow()函数显示组件
 22 |  *点击确认父组件返回一个select自定义事件
 23 |  */
 24 | export default {
 25 |     props: {
 26 |         confirmText: {
 27 |             type: String,
 28 |             default: "放弃后将不在保存进度！"
 29 |         },
 30 |         confirmBtnNext: {
 31 |             type: String,
 32 |             default: "确认"
 33 |         },
 34 |         confirmBtnBack: {
 35 |             type: String,
 36 |             default: "取消"
 37 |         }
 38 |     },
 39 |     data() {
 40 |         return {
 41 |             showFlag: false // v-show标志
 42 |         }
 43 |     },
 44 |     methods: {
 45 |         // 组件显示
 46 |         confirmShow() {
 47 |             this.showFlag = true
 48 |         },
 49 |         // 组件隐藏
 50 |         confirmHide() {
 51 |             this.showFlag = false
 52 |         },
 53 |         // 取消callback
 54 |         toBack() {
 55 |             this.confirmHide()
 56 |         },
 57 |         // 确认callback
 58 |         toNext() {
 59 |             this.confirmHide()
 60 |             this.$emit("select")
 61 |         }
 62 |     }
 63 | }
 64 | </script>
 65 | 
 66 | <style scoped lang="scss">
 67 | .confirm {
 68 |     position: fixed;
 69 |     left: 0;
 70 |     right: 0;
 71 |     top: 0;
 72 |     bottom: 0;
 73 |     z-index: 19980;
 74 |     color: #4d4d4d;
 75 |     background-color: rgba(0, 0, 0, 0.24);
 76 |     .confirm-wrapper {
 77 |         position: absolute;
 78 |         top: 50%;
 79 |         left: 50%;
 80 |         width: 300px;
 81 |         height: 180px;
 82 |         border-radius: 5px;
 83 |         background: #f5f4f4;
 84 |         border: 1px solid rgb(121, 119, 119);
 85 |         transform: translate(-50%, -50%);
 86 |         padding: 30px;
 87 |         box-sizing: border-box;
 88 |         .confirm-content {
 89 |             h2 {
 90 |                 font-size: 16px;
 91 |                 font-weight: 500;
 92 |                 margin-bottom: 20px;
 93 |             }
 94 |             p {
 95 |                 font-size: 14px;
 96 |                 margin-bottom: 30px;
 97 |             }
 98 |             .operate {
 99 |                 float: right;
100 |                 margin-top: 5px;
101 |             }
102 |             .operate-btn {
103 |                 width: 70px;
104 |                 height: 25px;
105 |                 border-radius: 5px;
106 |                 outline: none;
107 |                 cursor: pointer;
108 |             }
109 |             .left {
110 |                 margin-right: 15px;
111 |             }
112 |         }
113 |     }
114 | }
115 | 
116 | .confirm-fade-enter-active {
117 |     animation: confirm-fadein 0.3s;
118 | }
119 | 
120 | .confirm-content {
121 |     animation: confirm-zoom 0.3s;
122 | }
123 | 
124 | @keyframes confirm-fadein {
125 |     0% {
126 |         opacity: 0;
127 |     }
128 | 
129 |     100% {
130 |         opacity: 1;
131 |     }
132 | }
133 | 
134 | @keyframes confirm-zoom {
135 |     0% {
136 |         transform: scale(0);
137 |     }
138 | 
139 |     50% {
140 |         transform: scale(1.1);
141 |     }
142 | 
143 |     100% {
144 |         transform: scale(1);
145 |     }
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/弹出错误提示几秒消失/README.md:
--------------------------------------------------------------------------------
1 | - 父组件直接通过$refs调用show()函数显示组件，显示后delay秒消失
2 | - 父组件用alertText传递弹出信息，用delay传递消失时间


--------------------------------------------------------------------------------
/弹出错误提示几秒消失/confirmFindErrorAlert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="drop">
 3 |     <div class="toAlert" v-show="showFlag">
 4 |       <div class="toAlert-text">{{alertText}}</div>
 5 |     </div>
 6 |   </transition>
 7 | </template>
 8 | 
 9 | <script type="text/ecmascript-6">
10 | export default {
11 |     /**
12 |      * 父组件直接通过$refs调用show()函数显示组件，显示后delay秒消失
13 |      * 父组件用alertText传递弹出信息，用delay传递消失时间
14 |      * **/
15 |     props: {
16 |         alertText: {
17 |             type: String,
18 |             default: "错误原因不能为空！！"
19 |         },
20 |         delay: {
21 |             type: Number,
22 |             default: 2000
23 |         }
24 |     },
25 |     data () {
26 |         return {
27 |             showFlag: false
28 |         }
29 |     },
30 |     methods: {
31 |         show () {
32 |             this.showFlag = true
33 |             clearTimeout(this.timer)
34 |             this.timer = setTimeout(() => {
35 |                 this.hide()
36 |             }, this.delay)
37 |         },
38 |         hide () {
39 |             this.showFlag = false
40 |         }
41 |     }
42 | }
43 | </script>
44 | 
45 | <style scoped lang="scss">
46 | .toAlert {
47 |     position: fixed;
48 |     top: 50%;
49 |     left: 50%;
50 |     width: 200px;
51 |     height: 100px;
52 |     transform: translate(-50%, -50%);
53 |     border-radius: 8px;
54 |     z-index: 111900;
55 |     background: rgb(91, 169, 241);
56 | }
57 | .toAlert-text {
58 |     text-align: center;
59 |     line-height: 100px;
60 |     color: #ffff;
61 |     font-size: 14px;
62 | }
63 | .drop-enter {
64 |     opacity: 0;
65 | }
66 | .drop-enter-active {
67 |     opacity: 1;
68 |     // animation: confirm-fadein 0.3s;
69 |     // animation: confirm-zoom 0.3s;
70 | }
71 | @keyframes confirm-fadein {
72 |     0% {
73 |         opacity: 0;
74 |     }
75 | 
76 |     100% {
77 |         opacity: 1;
78 |     }
79 | }
80 | 
81 | @keyframes confirm-zoom {
82 |     0% {
83 |         transform: scale(0);
84 |     }
85 | 
86 |     50% {
87 |         transform: scale(1.1);
88 |     }
89 | 
90 |     100% {
91 |         transform: scale(1);
92 |     }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/评价星级组件/README.md:
--------------------------------------------------------------------------------
1 | - 点击评星，返回父组件评星星级数


--------------------------------------------------------------------------------
/评价星级组件/starChange.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <ul class="star-ul">
 4 |             <li class="star-li" v-for="(item,index) in starList" :key="index" @click="starClick(index)">
 5 |                 <img v-if="starShow(index)" src="../../../../assets/img/star1.jpg" alt="评星">
 6 |                 <img v-else src="../../../../assets/img/star2.jpg" alt="评星">
 7 |             </li>
 8 |         </ul>
 9 |     </div>
10 | </template>
11 | 
12 | <script type="text/ecmascript-6">
13 | export default {
14 |     /**
15 |      * 点击评星，返回父组件评星星级数
16 |      */
17 |     props: {
18 |         starList: {
19 |             type: Array,
20 |             default: [0, 1, 2, 3, 4]
21 |         }
22 |     },
23 |     data() {
24 |         return {
25 |             starIndex: -1
26 |         }
27 |     },
28 |     computed: {},
29 |     methods: {
30 |         starClick: function(index) {
31 |             this.starIndex = index
32 |             index += 1
33 |             this.$emit("select", index)
34 |         },
35 |         starShow: function(index) {
36 |             if (index <= this.starIndex) {
37 |                 return false
38 |             } else {
39 |                 return true
40 |             }
41 |         }
42 |     }
43 | }
44 | </script>
45 | 
46 | <style scoped lang="scss">
47 | .star-ul {
48 |     display: inline-block;
49 |     overflow: auto;
50 |     .star-li {
51 |         float: left;
52 |         margin-right: 10px;
53 |         cursor: pointer;
54 |     }
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/防删除的页面水印组件/README.md:
--------------------------------------------------------------------------------
 1 | ### web页面防删除水印组件
 2 | 
 3 | ![image-20181207143845449](http://blog.wwenj.com/usr/uploads/2018/12/2830948734.png)
 4 | 
 5 | ### 效果
 6 | 
 7 | - 在body节点下插入水印DOM节点，水印节点覆盖在页面最上层但不影响页面正常操作
 8 | - 在通过js或者用户通过开发者工具删除或修改水印节点时自动复原
 9 | 
10 | ### 原理
11 | 
12 | - 通过`canvas`画出节点需生成水印的文字生成`base64`图片
13 | - 生成该水印背景图的div节点插入到body下，通过js`MutationObserver`方法监听节点变化，再自动重新生成
14 | 
15 | ### 使用
16 | 
17 | - 直接引入项目任何组件中使用即可
18 | 
19 | - 组件prop接收三个参数
20 | 
21 |   **inputText**（String）：需要生成的水印文本，默认为`'waterMark水印'`
22 | 
23 |   **inputAllowDele**（Boolean）：是否需要允许用户删除水印DOM节点，true为允许，默认不允许
24 | 
25 |   **inputDestroy**（Boolean）：是否在组件销毁时去除水印节点，true会，默认不会，（只有在inputAllowDele为ftrue时才能生效）
26 | 
27 | - 如果需要修改水印大小，文字，颜色等样式，可直接进入组件中按注释修改


--------------------------------------------------------------------------------
/防删除的页面水印组件/waterMark.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div></div>
  3 | </template>
  4 | <script>
  5 | export default {
  6 |   props: {
  7 |     // 显示的水印文本
  8 |     inputText: {
  9 |       type: String,
 10 |       default: 'waterMark水印'
 11 |     },
 12 |     // 是否允许通过js或开发者工具等途径修改水印DOM节点（水印的id，attribute属性，节点的删除）
 13 |     // true为允许，默认不允许
 14 |     inputAllowDele: {
 15 |       type: Boolean,
 16 |       default: false
 17 |     },
 18 |     // 是否在组件销毁时去除水印节点（前提是允许用户修改DOM，否则去除后会再次自动生成）
 19 |     // true会，默认不会
 20 |     inputDestroy: {
 21 |       type: Boolean,
 22 |       default: false
 23 |     }
 24 |   },
 25 |   data () {
 26 |     return {
 27 |       maskDiv: {} // 当前显示的水印div节点DOM对象
 28 |     }
 29 |   },
 30 |   mounted () {
 31 |     // 确认DOM渲染后再执行
 32 |     this.$nextTick(() => {
 33 |       // 创建水印节点
 34 |       this.init()
 35 |       if (!this.inputAllowDele) {
 36 |         // 设置水印节点修改的DOM事件
 37 |         this.Monitor()
 38 |       }
 39 |     })
 40 |   },
 41 |   methods: {
 42 |     init () {
 43 |       let canvas = document.createElement('canvas')
 44 |       canvas.id = 'canvas'
 45 |       canvas.width = '200' // 单个水印的宽高
 46 |       canvas.height = '130'
 47 |       this.maskDiv = document.createElement('div')
 48 |       let ctx = canvas.getContext('2d')
 49 |       ctx.font = 'normal 18px Microsoft Yahei' // 设置样式
 50 |       ctx.fillStyle = 'rgba(112, 113, 114, 0.1)' // 水印字体颜色
 51 |       ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
 52 |       ctx.fillText(this.inputText, 30, 20)
 53 |       let src = canvas.toDataURL('image/png')
 54 |       this.maskDiv.style.position = 'fixed'
 55 |       this.maskDiv.style.zIndex = '9999'
 56 |       this.maskDiv.id = '_waterMark'
 57 |       this.maskDiv.style.top = '30px'
 58 |       this.maskDiv.style.left = '0'
 59 |       this.maskDiv.style.height = '100%'
 60 |       this.maskDiv.style.width = '100%'
 61 |       this.maskDiv.style.pointerEvents = 'none'
 62 |       this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
 63 |       // 水印节点插到body下
 64 |       document.body.appendChild(this.maskDiv)
 65 |     },
 66 |     Monitor () {
 67 |       let body = document.getElementsByTagName('body')[0]
 68 |       let options = {
 69 |         childList: true,
 70 |         attributes: true,
 71 |         characterData: true,
 72 |         subtree: true,
 73 |         attributeOldValue: true,
 74 |         characterDataOldValue: true
 75 |       }
 76 |       let observer = new MutationObserver(this.callback)
 77 |       observer.observe(body, options) // 监听body节点
 78 |     },
 79 |     // DOM改变执行callback
 80 |     callback (mutations, observer) {
 81 |       // 当attribute属性被修改
 82 |       if (mutations[0].target.id === '_waterMark') {
 83 |         this.removeMaskDiv()
 84 |       }
 85 |       // 当id被改变时
 86 |       if (mutations[0].attributeName === 'id') {
 87 |         this.removeMaskDiv()
 88 |         this.init()
 89 |       }
 90 |       // 当节点被删除
 91 |       if (mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
 92 |         this.init()
 93 |       }
 94 |     },
 95 |     /* public */
 96 |     // 手动销毁水印DOM
 97 |     removeMaskDiv () {
 98 |       document.body.removeChild(this.maskDiv)
 99 |     },
100 |     // 手动生成水印
101 |     createMaskDiv () {
102 |       this.init()
103 |     }
104 |   },
105 |   watch: {
106 |     // 监听传入水印文本变化
107 |     inputText () {
108 |       this.$nextTick(() => {
109 |         this.removeMaskDiv()
110 |       })
111 |     }
112 |   },
113 |   destroy () {
114 |     // 组件销毁时去除生成在body节点下的水印节点
115 |     if (this.inputDestroy) {
116 |       this.removeMaskDiv()
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------