refine:icon demo add clipboard
This commit is contained in:
		| @@ -1,10 +1,10 @@ | |||||||
| <template> | <template> | ||||||
|   <div class="icons-container"> |   <div class="icons-container"> | ||||||
|     <div class="icons-wrapper"> |     <div class="icons-wrapper"> | ||||||
|       <div v-for='item of iconsMap' :key='item' class='icon-item'> |       <div v-for='item of iconsMap' :key='item' class='icon-item' @click='handleClipboard(generateIconCode(item),$event)'> | ||||||
|         <el-tooltip placement="top" effect="light"> |         <el-tooltip placement="top" effect="light"> | ||||||
|           <div slot="content"> |           <div slot="content"> | ||||||
|             {{`<icon-svg :icon-class="${item}" />`}} |             {{generateIconCode(item)}} | ||||||
|           </div> |           </div> | ||||||
|           <icon-svg :icon-class="item" /> |           <icon-svg :icon-class="item" /> | ||||||
|         </el-tooltip> |         </el-tooltip> | ||||||
| @@ -16,6 +16,7 @@ | |||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import icons from './generateIconsView' | import icons from './generateIconsView' | ||||||
|  | import clipboard from '@/utils/clipboard' // use clipboard directly | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
|   data() { |   data() { | ||||||
| @@ -28,6 +29,14 @@ export default { | |||||||
|       return i.default.id.split('-')[1] |       return i.default.id.split('-')[1] | ||||||
|     }) |     }) | ||||||
|     this.iconsMap = iconsMap |     this.iconsMap = iconsMap | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     generateIconCode(symbol) { | ||||||
|  |       return `<icon-svg :icon-class="${symbol}" />` | ||||||
|  |     }, | ||||||
|  |     handleClipboard(text, event) { | ||||||
|  |       clipboard(text, event) | ||||||
|  |     } | ||||||
|   } |   } | ||||||
| } | } | ||||||
| </script> | </script> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user