demo 原始链接:https://vux.li/demos/v2/#/component/popover
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div style=\"text-align:center;\">\n <popover placement=\"top\" style=\"margin: 20px;\" @on-show=\"onShow\" @on-hide=\"onHide\">\n <div slot=\"content\" class=\"popover-demo-content\">\n hello world\n </div>\n <button class=\"btn btn-default\">{{ $t('Popover on top') }}</button>\n </popover>\n\n <popover placement=\"bottom\" style=\"margin: 20px;\">\n <div slot=\"content\" class=\"popover-demo-content\">\n hello world\n </div>\n <button class=\"btn btn-default\">{{ $t('Popover on bottom') }}</button>\n </popover>\n\n <popover placement=\"left\" style=\"margin: 20px;\">\n <div slot=\"content\" class=\"popover-demo-content\">\n hello world\n </div>\n <button class=\"btn btn-default\">{{ $t('Popover on left') }}</button>\n </popover>\n\n <popover placement=\"right\" style=\"margin: 20px;\">\n <div slot=\"content\" class=\"popover-demo-content\">\n hello world\n </div>\n <button class=\"btn btn-default\">{{ $t('Popover on right') }}</button>\n </popover>\n </div>\n</template>\n\n\n\n<script>\nimport { Popover } from 'vux'\n\nexport default {\n components: {\n Popover\n },\n methods: {\n onShow () {\n console.log('on show')\n },\n onHide () {\n console.log('on hide')\n }\n }\n}\n</script>\n\n<style scoped>\n.popover-demo-content {\n padding: 5px 10px;\n}\n</style>\n\n
\n