demo 原始链接:https://vux.li/demos/v2/#/component/blur
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div style=\"\">\n <blur :blur-amount=40 :url=\"url\">\n <p class=\"center\"><img :src=\"url\"></p>\n </blur>\n <flexbox :gutter=\"0\">\n <flexbox-item v-for=\"(img, index) in images\" :key=\"index\"><img :src=\"img\" style=\"width:100%\" @click=\"url = img\"/></flexbox-item>\n </flexbox>\n </div>\n</template>\n\n<script>\nimport { Flexbox, FlexboxItem, Blur } from 'vux'\n\nexport default {\n components: {\n Blur,\n Flexbox,\n FlexboxItem\n },\n data () {\n return {\n images: [\n 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg',\n 'https://o3e85j0cv.qnssl.com/waterway-107810__340.jpg',\n 'https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg'\n ],\n url: 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg'\n }\n }\n}\n</script>\n\n<style scoped>\n.center {\n text-align: center;\n padding-top: 20px;\n color: #fff;\n font-size: 18px;\n}\n.center img {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 4px solid #ececec;\n}\n</style>\n\n
\n