代码编织梦想

<template>
    <div>
        <BugHeader></BugHeader>
        <BugList></BugList>
        <BugFooter></BugFooter>
    </div>
</template>

<script>
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter}
}
</script>

<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>

<template>

    <div>

        <BugHeader></BugHeader>

        <BugList></BugList>

        <BugFooter></BugFooter>

    </div>

</template>

<script>

import BugHeader from "./components/BugHeader.vue";

import BugList from "./components/BugList.vue";

import BugFooter from "./components/BugFooter.vue";

export default {

    name : "App",

    components : {BugHeader,BugList,BugFooter}

}

</script>

<style>

.button{

    display: inline-block inline;

    zoom: 1;

    padding: 6px 20px;

    margin: 0;

    cursor: pointer;

    border: 1px solid #bbb;

    overflow: visible;

    font: bold 13px arial, helvetica, sans-serif;

    text-decoration: none;

    white-space: nowrap;

    color: #555;

    background-color: #ddd;

    background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));

    -webkit-transition: background-color .2s ease-out;

    -moz-transition: background-color .2s ease-out;

    -ms-transition: background-color .2s ease-out;

    -o-transition: background-color .2s ease-out;

    transition: background-color .2s ease-out;

    background-clip: padding-box; /* Fix bleeding */

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;

    text-shadow: 0 1px 0 rgba(255,255,255, .9);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.button:active{

    background: #e9e9e9;

    position: relative;

    top: 1px;

    text-shadow: none;

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;

}

.button.red{

    color: #fff;

    text-shadow: 0 1px 0 rgba(0,0,0,.2);

    background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));

    background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

    background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));

}

.button.red{

    background-color: #ca3535;

    border-color: #c43c35;

}

.button.red:hover{

    background-color: #ee5f5b;

}

.button.red:active{

    background: #c43c35;

}

.button.green{

    background-color: #57a957;

    border-color: #57a957;

}

.button.green:hover{

    background-color: #62c462;

}

.button.green:active{

    background: #57a957;

}

</style>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选<input type="checkbox"/></th>
                    <th>bug描述</th>
                    <th class="c2"></th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug"></BugItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import BugItem from "./BugItem.vue";
export default {
    name : "BugList",
    components : {BugItem},
    data(){
        return {
            bugList : [
                {id : 1,desc : "Bug描述信息1",resolved : true},
                {id : 2,desc : "Bug描述信息2",resolved : false},
                {id : 3,desc : "Bug描述信息3",resolved : true},
            ]
        }
    }
}
</script>

<style scoped>
/* list */
table{
	width: 760px;
	border-collapse: collapse;
}
table caption{
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}
.c1,.c2{
	width: 100px;
}
th {
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
table thead tr{
	background-color: #008c8c;
	color: #fff;
}
</style>

<template>

    <div>

        <table>

            <thead>

                <tr>

                    <th class="c1">全选<input type="checkbox"/></th>

                    <th>bug描述</th>

                    <th class="c2"></th>

                </tr>

            </thead>

            <tbody>

                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug"></BugItem>

            </tbody>

        </table>

    </div>

</template>

<script>

import BugItem from "./BugItem.vue";

export default {

    name : "BugList",

    components : {BugItem},

    data(){

        return {

            bugList : [

                {id : 1,desc : "Bug描述信息1",resolved : true},

                {id : 2,desc : "Bug描述信息2",resolved : false},

                {id : 3,desc : "Bug描述信息3",resolved : true},

            ]

        }

    }

}

</script>

<style scoped>

/* list */

table{

    width: 760px;

    border-collapse: collapse;

}

table caption{

    font-size: 1em;

    font-weight: bold;

    margin: 1em 0;

}

.c1,.c2{

    width: 100px;

}

th {

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

table thead tr{

    background-color: #008c8c;

    color: #fff;

}

</style>

<template>
    <tr>
            <td><input type="checkbox" :checked="bug.resolved"></td>
            <td>{{ bug.desc }}</td>
            <td><button class="samll red button">删除</button></td>
    </tr>
</template>

<script>
export default {
    name : "BugItem",
    props : ['bug']
}
</script>

<style scoped>
/* item */
table tbody tr:nth-child(odd){
	background-color: #eee;
}
table tbody tr:hover{
	background-color: #ccc;
}
table tbody tr td:first-child{
	color: #f40;
}
td{
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
.desc {
    cursor: pointer;
}
</style>

<template>

    <tr>

            <td><input type="checkbox" :checked="bug.resolved"></td>

            <td>{{ bug.desc }}</td>

            <td><button class="samll red button">删除</button></td>

    </tr>

</template>

<script>

export default {

    name : "BugItem",

    props : ['bug']

}

</script>

<style scoped>

/* item */

table tbody tr:nth-child(odd){

    background-color: #eee;

}

table tbody tr:hover{

    background-color: #ccc;

}

table tbody tr td:first-child{

    color: #f40;

}

td{

    border: 1px solid #999;

    text-align: center;

    padding: 5px 0;

}

.desc {

    cursor: pointer;

}

</style>

<template>
    <div class="footer">
        <button @click="clean()" class="small red button">清除已解决</button>
        <h3>当前BUG总量{{ TNumber }}个,已解决{{ SNumber }}个</h3>
    </div>
</template>

<script>
export default {
    name : "BugFooter",
    data(){
        return {
            TNumber : 0,
            SNumber : 0
        }
    },
    methods : {
        clean(){

        }
    }
}
</script>

<style scoped>
/* footer */
.footer{
	margin-top: 10px;
}
.footer span{
	font-size: 12px;
}
</style>

<template>

    <div class="footer">

        <button @click="clean()" class="small red button">清除已解决</button>

        <h3>当前BUG总量{{ TNumber }}个,已解决{{ SNumber }}个</h3>

    </div>

</template>

<script>

export default {

    name : "BugFooter",

    data(){

        return {

            TNumber : 0,

            SNumber : 0

        }

    },

    methods : {

        clean(){

        }

    }

}

</script>

<style scoped>

/* footer */

.footer{

    margin-top: 10px;

}

.footer span{

    font-size: 12px;

}

</style>

<template>
    <div>
        <textarea cols="105" rows="4" v-model.lazy="info" placeholder="请输入BUG的描述信息"></textarea>
        <br>
        <button @click="submit()" class="small green button">保存</button>
    </div>
</template>

<script>
export default {
    name : "BugHeader",
    data(){
        return {
            info : ""
        }
    },
    methods : {
        submit()
        {

        }
    }
}
</script>

<style scoped>
/* header */
.header {
	margin-bottom: 20px;
	margin-top: 20px;
}
</style>

<template>

    <div>

        <textarea cols="105" rows="4" v-model.lazy="info" placeholder="请输入BUG的描述信息"></textarea>

        <br>

        <button @click="submit()" class="small green button">保存</button>

    </div>

</template>

<script>

export default {

    name : "BugHeader",

    data(){

        return {

            info : ""

        }

    },

    methods : {

        submit()

        {

        }

    }

}

</script>

<style scoped>

/* header */

.header {

    margin-bottom: 20px;

    margin-top: 20px;

}

</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/2201_75960169/article/details/134833288

基于vue的动态菜单和视图控制_糖果大大的博客-爱代码爱编程

前言 在前一篇文章中我通过addRoutes的方法实现了路由层面的权限控制,具体看基于Vue的addRoutes实现权限控制一文。本篇将着重介绍不同权限的菜单栏动态生成的方法以及不同权限渲染不同的控件。 动态生成菜单 在后台登录接口仅仅只返回给我当前登录账号权限的情况下,因为菜单和路由其实是一一对应的关系,所以在编写路由表的时候就给路由添加了相应的菜单属性

vue之动态加载图片列表-爱代码爱编程

最近开发中遇到一个问题,后端只给返回图片名称,不返回图片路径 需要前端动态拼接图片路径,根据返回的图片名称,显示对应的图片 <div v-for="(item, index) in imgList" :key="index"> <img :src="'../assets/images/'+ item.n +'

Vue+elementUI 动态展示列表的数据-爱代码爱编程

需求描述:活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName" :visible.sync="vie

vue动态列表响应式布局-爱代码爱编程

  问题描述:选择哪个模块就显示什么 思路:通过标识来判断是否选择,动态控制列表长度及样式 页面渲染代码: <div class="header_tabs"> <ul> <li v-for="(item,index) in headertabs" :key="i

vue动态添加表单-爱代码爱编程

前言 日常开发中,动态添加表单的场景还是蛮多的,可能第一次听到动态添加表单的同学会有一点懵,但其实实现起来还是很简单的,下面一起来看看吧。 实现思路 当我们点击 “新增车辆信息” 按钮时,通过一个标识判断表单内容是否全部填写了,若全部填写了则添加一个新的表单,反之提醒用户完善信息; 当我们点击 “删除此条车辆信息” 按钮时,通过拿到的当前下

【vue 动态表格】_panyvping的博客-爱代码爱编程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 ** vue动态表格的实现 ** 前言 作为一名刚入职公司不久的小前端,在公司做rep后台管理系统,其中表格的查询相当的多,一个表格可能有十几二十个列表,就会显得非常的杂乱,然后就想到了能不能去动态的该表表格的列表,选择自己需要列去显示,不需要的列不去显示。 一、什么是

vue动态列表_kingyiha的博客-爱代码爱编程

目录 1.效果展示2.实例代码3.代码介绍 1.效果展示 2.实例代码 <body>标签: <div id=wrapper> <button @click="disDrawer = true" >弹出抽屉</button> <el-drawer :titl

flutter学习笔记06-listview动态列表_刘景艺的博客-爱代码爱编程

学习视频链接:https://www.bilibili.com/video/BV1S4411E7LY/?p=25&spm_id_from=pageDriver&vd_source=cee744cae4ead2

vue table表格动态列 table表格动态生成列_vue 动态table-爱代码爱编程

一、效果 1.初始化有4个字段(列) 2.用CheckBox或者按钮等触发事件,改变列 二、需求 2.1 因为客户要按照不同的分组进行统计金额数据,展示的列会改变,因此sql语句要改为动态执行,定义变量去控制S

javascript基础 实现动态创建列表_js中动态添加列表-爱代码爱编程

js基础 获取元素的六种方式 : 1、通过ID获取 获取单个元素 2、通过类名获取 取多个元素 3、通过标签名获取 获取多个元素

vue element-爱代码爱编程

1、实现效果     1.1、文件目录 1.2、说明 1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 2、table.vue(最父级,入口调用) &

vue项目表格动态列表,主要逻辑代码_vue 动态列表-爱代码爱编程

<el-table-column v-for="col in list_name" :key="col" :prop="col" :label="col" min-width="100" ></el