element中的Popover 弹出框

element中的Popover 弹出框

实现功能：

1、当鼠标悬浮于“网站”按钮时弹出网站名称、是否收藏。
2、点击相关的网站名称在浏览器新页面打开该名称的网站。
3、点击“收藏”按钮，把用户名和相应的网站名称记入浏览器localStorage中。

实现代码：

<template>
  <div>
    <el-popover
				placement="right"
				width="400"
				trigger="hover" >
				<el-table :data="gridData" >
          <!-- 使用vue的solt插槽结合element中的scope.row实现获取相应的链接 -->
					<el-table-column width="280" prop="address" label="网站名称" property="Newname" >
						<template slot-scope="scope">
							<a :href="scope.row.address" target="_blank" >{{scope.row.Newname}}</a>
						</template>
					</el-table-column>
					<!-- 同上，外加使用getValue()函数，把scope.row.Newname作为参数传入函数，使得可以在script模块中获取新闻标题 -->
					<el-table-column width="80" label="是否收藏" prop="Newname" >
						<template slot-scope="scope">
							<el-button  @click="getValue(scope.row.Newname)">{{ scope.row.date }}</el-button>
						</template>
						
					</el-table-column>
				</el-table>
				<el-button slot="reference" class="h">网站</el-button>
					
			</el-popover>
  </div>
</template>

<script>
export default {
	data() {
      return {
		bb:"",
		valueArr:[],
        gridData: [
			{
				date:"收藏",
				Newname:"百度",
				address: 'http://www.baidu.com/'
			},
			{
				date: '收藏',
				Newname:"京东",
				address: 'https://www.jd.com/'
			},
			{
				date: '收藏',
				Newname:"淘宝",
				address:"https://www.taobao.com/"
			},
			{
				date: '收藏',
				Newname:"b站",
				address:"https://www.bilibili.com/"
			},
	]
      };
    },
	
	methods: {
		getValue(value){
			this.valueArr.push(value);
			localStorage.setItem('zhangsan',this.valueArr);
		},
		
	},
	
}
</script>

<style>
a{
  text-decoration: none;
}
</style>