zoukankan      html  css  js  c++  java
  • 作业40

    作业40

    把elementUI和vue-router安装到vue里面,并对于todolist和商品管理的功能,按钮,输入框,删除提示进行UI美化,使用ElementUI提供的样式和特效进行加工。
    要求:
       1. todolist和商品管理是2个独立的页面组件,有属于自己的url地址,相互之间可以通过按钮进行页面跳转.
       2. 每一个页面组件至少加入3个以上的ElementUI的效果。
    

    Todolist.vue

    <template>
      <div class="list_con">
    		<h2>To do list</h2>
        <el-input v-model="content" placeholder="请添加目标"></el-input>
        <el-button type="primary" round @click="add">添加</el-button>
        <el-card class="box-card">
          <div v-for="info,index in infolist" class="text item">
            <el-row>
              <el-col :span="16">
                <span>{{info}}</span>
              </el-col>
              <el-col :span="8">
                <span>
                <el-button type="primary" icon="el-icon-caret-top" circle @click="up(index)"></el-button>
                <el-button type="success" icon="el-icon-caret-bottom" circle @click="down(index)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="dele(index)"></el-button>
                </span>
              </el-col>
            </el-row>
          </div>
        </el-card>
    	</div>
    </template>
    
    <script>
        export default {
            name: "Todolist",
            data(){return {
                    content:'',
                    infolist:["学习html","学习css","学习javascript","学习语文"],
                }},
            methods:{
                add(){
                    this.infolist.push(this.content);
                    this.content='';
                },
                up(index){
                    if (index!==0){
                        let tmp = this.infolist.splice(index,1)[0];
                        this.infolist.splice(index-1,0,tmp);
                    }
    
    
                },
                down(index){
                    if (index!==this.infolist.length-1) {
                        let tmp = this.infolist.splice(index,1)[0];
                        this.infolist.splice(index+1,0,tmp);
                    }
                },
                dele(index){
                    this.infolist.splice(index)
                }
            }}
    </script>
    
    <style scoped>
        .list_con{
    			600px;
    			margin:50px auto 0;
    		}
    		.list li{
    			height:40px;
    			line-height:40px;
    			border-bottom:1px solid #ccc;
    		}
    
    		.list li span{
    			float:left;
    		}
    
    		.list li a{
    			float:right;
    			text-decoration:none;
    			margin:0 10px;
    		}
    </style>
    
    

    Goodslist.vue

    <template>
      <el-container>
        <el-header class="el-dialog--center"><h1>商品展示页面</h1></el-header>
        <el-main>
          <el-row>
              <el-col :span=16 offset=4><div class="grid-content bg-purple-dark">
                <div>
                    <button @click="addshow=true">添加商品</button>
                    <button @click="goodsshow=true">显示商品</button>
                    <div v-show="goodsshow">
                      <el-table
                        :data="goodslist"
                        stripe
                        style=" 100%"
                        >
                        <el-table-column
                          type="index"
                          label="商品编号"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="title"
                          label="商品标题"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          label="商品数量">
                          <template slot-scope="scope">
                              <el-input-number size="mini" v-model="scope.row.amount" :min="0" :max="100" label="描述文字"></el-input-number>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="商品单价">
                        </el-table-column>
                        <el-table-column label="商品总价">
                          <template slot-scope="scope">
                              <span style="margin-left: 10px">{{ scope.row.amount*scope.row.price }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle  @click="edit(scope.row.id-1)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="dele(scope.row.id-1)"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <i class="el-icon-money">共计:{{total}}</i>
                      <!--    添加商品面板-->
                      <el-dialog
                        title="添加商品"
                        :visible.sync="addshow"
                        width="30%"
                        >
                        <span>
                          <p>商品id:<input type="text" v-model="tmp_obj.id"></p>
                          <p>商品标题:<input type="text" v-model="tmp_obj.title"></p>
                          <p>商品数量:<input type="text" v-model="tmp_obj.amount"></p>
                          <p>商品价格:<input type="text" v-model="tmp_obj.price"></p>
                        </span>
                        <span slot="footer" class="dialog-footer">
                          <button @click="add">保存</button>
                          <button @click="addshow=false">取消</button>
                        </span>
                      </el-dialog>
            <!--    编辑商品面板-->
                      <el-dialog
                        title="编辑商品"
                        :visible.sync="editshow"
    
                        width="30%"
                        >
                        <span>
                          <p>商品标题:<input type="text" v-model="tmp_obj2.title"></p>
                          <p>商品数量:<input type="text" v-model="tmp_obj2.amount"></p>
                          <p>商品价格:<input type="text" v-model="tmp_obj2.price"></p>
                        </span>
                        <span slot="footer" class="dialog-footer">
                          <button @click="save">保存</button>
                          <button @click="cancel">取消</button>
                        </span>
                      </el-dialog>
                    </div>
                </div>
              </div></el-col>
          </el-row>
        </el-main>
      </el-container>
    
    
    
    
    </template>
    
    <script>
        export default {
            name: "Goodslist",
            data(){return {
                tmp_obj:{},
                tmp_obj2:{},
                tmp_index:null,
                addshow:false,
                editshow:false,
                goodsshow:false,
                goodslist:[
                    {'id':1,'title':'python入门','price':200,'amount':14},
                    {'id':2,'title':'python进阶','price':555,'amount':27},
                    {'id':3,'title':'python跑路','price':999,'amount':33},
                ]
            }},
            methods:{
                add(){
                    this.goodslist.push(this.tmp_obj);
                    this.tmp_obj={}
                    this.addshow=false;
                },
                edit(index){
                  console.log(index)
                    this.editshow=true;
                    // 直接写this.tmp_obj2=this.goodslist[index]是浅拷贝,可变数据类型 原数据会跟着改变
                    this.tmp_obj2=JSON.parse(JSON.stringify(this.goodslist[index]))
                    // this.tmp_obj2.title=this.goodslist[index].title;
                    // this.tmp_obj2.id=this.goodslist[index].id;
                    // this.tmp_obj2.price=this.goodslist[index].price;
                    // this.tmp_obj2.mount=this.goodslist[index].mount;
                    this.tmp_index=index
                },
                save(){
                    this.goodslist.splice(this.tmp_index,1,this.tmp_obj2);
                    this.tmp_obj2={};
                    this.editshow=false;
                },
                dele(index){
                    this.goodslist.splice(index,1)
                },
                cancel(){
                    this.editshow=false;
                    this.tmp_obj={}
                }
            },
            computed:{
              total(){
                let sum=0;
                for (let item of this.goodslist){
                  console.log(item)
                  sum += item.price*item.amount
                }
                return sum
              }
            }
        }
    
    </script>
    
    <style scoped>
    
    </style>
    
    
    
    

    App.vue

    <template>
      <div id="app">
        <router-view></router-view>
        <button @click="$router.push({name:'goodslist'})">进入商品列表页面</button>
        <button @click="$router.push({name:'todolist'})">进入todolist页面</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      components: {
      }
    }
    </script>
    
    <style>
    
    </style>
    

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from '@/router/index'
    // elementUI 导入
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    // 调用插件
    Vue.use(ElementUI);
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import Todolist from "../components/Todolist";
    import Manage from "../components/Manage";
    import Goodslist from "../components/Goodslist";
    
    Vue.use(Router)
    
    export default new Router({
      mode:'history',
      routes:[
        {path:'/todolist',component:Todolist,name:'todolist'},
        {path:'/goodslist',component:Goodslist,name:'goodslist'},
        {path:'/manage',component:Manage},
    
      ]
    })
    
    
  • 相关阅读:
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    210 Course ScheduleII
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    sql 开发经验
  • 原文地址:https://www.cnblogs.com/achai222/p/13183278.html
Copyright © 2011-2022 走看看