项目需要用到的 iview 表格中操作项目有各种各样的图标, 而各种各样的图标代表不同的操作, 面对新用户可能很懵, 那如何给这些图标添加 Tooltip 文字提示?
废话不多讲, 直接看代码:
- :columns="columns" :data="data">
- export default {
- data () {
- return {
- columns: [
- {
- title: 'Name',
- key: 'name'
- },
- {
- title: 'Age',
- key: 'age'
- },
- {
- title: 'Address',
- key: 'address'
- },
- {
- title: '操作',
- key: 'action',
- render: (h, { row }) => {
- return h('div', [
- h('Tooltip', {
- props: {
- placement: 'top',
- transfer: 'true',
- content: '提示文字内容'
- }
- }, [
- h('Icon', {
- props: {
- // custom: 'icon-seewrap' // 自定义图标
- type: 'md-add',
- size: '28'
- },
- on: {
- click: () => {
- // 添加
- alert("添加")
- }
- }
- })
- ])
- ])
- }
- }
- ],
- data: [
- {
- name: 'John Brown',
- age: 18,
- address: 'New York No. 1 Lake Park',
- date: '2016-10-03'
- },
- {
- name: 'Jim Green',
- age: 24,
- address: 'London No. 1 Lake Park',
- date: '2016-10-01'
- }
- ]
- }
- }
- }
来源: http://www.bubuko.com/infodetail-3080061.html