公司网站建设如何撤销,wordpress著名案例,阿里云做的网站程序员,大连网站html通过CDN引入Vue使用Vuex以及Computed、Watch监听 近期遇到个需求#xff0c;就是需要在.net MVC的项目中#xff0c;对已有的项目的首页进行优化#xff0c;也就是写原生html和js。但是咱是一个写前端的#xff0c;写html还可以#xff0c;.net的话#xff0c;开发也…html通过CDN引入Vue使用Vuex以及Computed、Watch监听 近期遇到个需求就是需要在.net MVC的项目中对已有的项目的首页进行优化也就是写原生html和js。但是咱是一个写前端的写html还可以.net的话开发也不方便还得安装Visual Studio启动项目。所以就计划在html文件中开发然后移植到.net的项目中 功能说明需要开发一个dashboard也就是大屏可视化多个模块然后由图表作为主要内容。那么就意味着需要全局监听如果筛选条件改变那么所有的组件都需要监听到这个改变做出相应的反应。 效果图 代码实现
store.js
const store new Vuex.Store({state: {msg: Hello World,count: 5},mutations: {increment(state, payload) {console.log(的话,state,payload)state.count }},actions: {increment(context, payload) {setTimeout(() {context.commit(increment, payload);}, 2000);}},getters: {msg(state) {return state.msg.toUpperCase();},count(state) {return state.count;}},
});然后将store挂载到Vue上 主页面html !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue Grid Layout 示例/title!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.cssstyle#loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }#loader {display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #fe9501; -webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}#loader:before {content: ; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: ; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }}keyframes spin {0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }}.load-text{color: #fe9501;text-align: center;position: relative;top: 55%;transform: translateY(-50%);}html {font-size: 100%; /*100 ÷ 16 × 100% 625%*/}media screen and (min-width:800px) and (max-width:999px) {html { font-size: 65%; }}media screen and (min-width:1000px) and (max-width:1024px) {html { font-size: 70%; }}media screen and (min-width:1025px) and (max-width:1280px) {html { font-size: 90%; }}media screen and (min-width:1281px) and (max-width:1680px) {html { font-size: 100%; }}media screen and (min-width:1681px) and (max-width:1920px) {html { font-size: 100%; }}media screen and (min-width:1921px) and (max-width:2240px) {html { font-size: 150%; }}media screen and (min-width:2241px){html { font-size: 150%; }}.vue-grid-layout {background: #eee;}.vue-grid-item:not(.vue-grid-placeholder) {background: #ccc;border: 1px solid black;}.vue-grid-item .resizing {opacity: 0.9;}.vue-grid-item .static {background: #cce;}.vue-grid-item .text {font-size: 24px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 100%;width: 100%;}.vue-grid-item .no-drag {height: 100%;width: 100%;}.vue-grid-item .minMax {font-size: 12px;}.vue-grid-item .add {cursor: pointer;}.vue-draggable-handle {position: absolute;width: 20px;height: 20px;top: 0;left: 0;background: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width10 height10circle cx5 cy5 r5 fill#999999//svg) no-repeat;background-position: bottom right;padding: 0 8px 8px 0;background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;cursor: pointer;}.vue-grid-item{display: flex;}.echart{width: 100%;height: 100%;min-height: 5rem;}/style
/head
bodydiv idapp!-- grid-layout :layoutlayout :col-num12 :row-height30 :is-draggabletrue :is-resizabletruegrid-item v-foritem in layout :keyitem.i :xitem.x :yitem.y :witem.w :hitem.h classgrid-item{{ item.i }}/grid-item/grid-layout --el-button clickcliackDialog typesuccessButton/el-buttonel-button clickincrement typesuccess{{count}}/el-buttonel-dialog :visible.syncvisible titleHello worldpTry Element/p/el-dialogmy-component title标题 contentThis is the first component/my-component/div!-- 引入Vue --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script!-- 引入Vuex --script srchttps://unpkg.com/vuex3.6.2/dist/vuex.js/script!-- 引入gird组件 --script src./vue-grid-layout.common.js/scriptscript src./vue-grid-layout.umd.min.js/script!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js/script!-- 引入子组件 --script src./son.js/script!-- 引入vuex --script src./store.js/scriptscriptnew Vue({el: #app,store,data: {draggable: true,resizable: false,index: 0,visible:false,},computed: {count() {return this.$store.state.count;}},watch:{$store.state.count:{handler(newVal,oldVal){console.log(主界面监听Vuex,newVal,oldVal)}}},mounted(){this.initEchart()},methods: {increment() {this.$store.commit(increment);},cliackDialog(){this.visible !this.visible},} });/script
/body
/html
子组件js
{/* script srchttps://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js/script */}var link document.createElement(link);
link.rel stylesheet;
link.href ./son.css;
document.head.appendChild(link);let htmlstr divdiv classson-box{{ title }} - {{ content }} - {{str}}/divdiv classechart22/div/div// 导入 mapState 辅助函数 这样监听和通过$store监听都可以
// const { mapState } Vuex;// my-component.js
Vue.component(my-component, {props: [title, content],template: htmlstr,data(){return{str:1}},// computed: {// ...mapState([count])// },watch: {// count:{// handler(v){// // 在 count 发生变化时执行的操作// console.log(子组件监听Vuex, v);// }// },$store.state.count:{handler(newVal,oldVal){console.log(子组件监听Vuex,newVal,oldVal)}}},mounted(){// setTimeout((){this.initEchart()// })},methods:{initEchart(){var option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: line}]};setTimeout((){let chartDom2 document.getElementsByClassName(echart2)[0]var myChart2 echarts.init(chartDom2);myChart2.setOption(option);})}}
});
