首页 > 其他分享 >前端Vue仿企查查 天眼查知识产权标准信息列表组件

前端Vue仿企查查 天眼查知识产权标准信息列表组件

时间:2023-09-02 18:12:00浏览次数:46  
标签:Vue 天眼 开发 开发者 组件 123456 仿企


引入Vue仿企查查天眼查知识产权标准信息列表组件

随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间可以随意的进行组合。大大提升了开发的效率,降低了维护的成本。

本文将介绍一款组件:前端Vue仿企查查天眼查知识产权标准信息列表组件。该组件基于Vue.js开发,具有单独开发、单独维护和随意组合的优点,并附有完整代码下载地址:https://ext.dcloud.net.cn/plugin?id=14188。

效果图如下:

一、引言

随着信息技术的迅速发展,对于系统的要求也越来越高。传统的开发方式使得系统的复杂度越来越高,一个小小的改动或小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间可以随意的进行组合。大大提升了开发的效率,降低了维护的成本。

二、技术实现

cc-bzListView是一款基于Vue.js的仿企查查天眼查知识产权标准信息列表组件。该组件采用组件化的开发方式,使得开发者可以单独开发、单独维护,并且可以随意组合。开发者可以根据自己的需求,对组件进行自定义扩展,实现更多的功能。

该组件的主要参数是bzList,它是一个数组信息。数组中的每个元素都是一个对象,包含了对应的信息。开发者可以根据自己的需求,将需要展示的信息放在这个数组中,然后传递给组件。组件会根据这些信息,自动生成对应的列表。

三、使用方法

使用该组件需要先引入相关的CSS和JavaScript文件,然后在HTML中定义组件的标签,并设置相应的属性值。下面是一个使用该组件的示例代码:


<!-- 仿企查查标准信息列表组件 productList:数组信息  -->

<cc-bzListView :bzList="bzList"></cc-bzListView>

HTML代码实现部分


<template>

<view class="content">

<div class="mui-content-padded">

<!-- 仿企查查标准制定列表组件 -->

<cc-bzListView :productList="bzList"></cc-bzListView>

</div>

<!-- 自定义等分底部菜单按钮 -->

<view class="bottomV">

<!-- upTextArr:上面标题数组 downTextArr:下面标题数组  selIndex:选择序列 selColor:选中颜色 @menuClick:按钮点击事件 -->

<cc-BotMenu :upTextArr="uptextArr" :downTextArr="downTextArr" :selIndex="selIndex" selColor="orange"

@menuClick="menuClick"></cc-BotMenu>

</view>

</view>

</template>

<script>

export default {

data() {

return {

bzList: [],

uptextArr: ['1', "2", "3", "4", '5'],

downTextArr: ['国家标准', "行业标准", "省级标准", "团体标准", '企业标准'],

selIndex: "0",

}

},

mounted() {

this.bzList = [{

"id": "2",

"isNewRecord": false,

"comName": "123456",

"socialCode": "123456",

"comCode": "123456",

"standardName": "药品网络经营质量规范",

"standardType": "国家标准",

"standardNo": "T/CAPC 010—2023",

"createUnit": "中国医药商业协会、国药控股股份有限公司、上药控股有限公司、华润医药商业集团有限公司 等更多18家单位",

"publishTime": "2021-01-03",

"standardState": "即将实施",

"recommended": "推荐"

}, {

"id": "1",

"isNewRecord": false,

"comName": "123456",

"socialCode": "123456",

"comCode": "123456",

"standardName": "益生菌食品",

"standardType": "团体标准",

"standardNo": "T/CNFIA 131—2021",

"createUnit": "北京科拓恒通生物技术股份有限公司、中国食品发酵工业研究院、北京热心肠生物技术研究院有限公司、内蒙古蒙牛乳业(集团)股份有限公司 等更多30家单位",

"publishTime": "2021-01-02",

"standardState": "现行",

"recommended": "推荐"

}];

},

methods: {

// 按钮点击事件

menuClick(tag) {

// 点击序列赋值

this.selIndex = tag;

}

}

}

</script>

<style>

page {

background: #f3f4f6;

}

.content {

display: flex;

flex-direction: column;

}

.mui-content-padded {

margin: 0px 14px;

}

.bottomV {

/* 设置视图置顶 */

display: flex;

flex-direction: row;

position: fixed;

margin-top: calc(100vh - 168px);

height: 60px;

z-index: 9999 !important;

width: 100vw;

background-color: white;

padding-left: 0px;

padding-bottom: 20px;

}

</style>

在上面的代码中,我们定义了一个cc-bzListView组件,并设置了bzList属性。这个属性的值是一个数组信息,包含了需要展示的所有信息。开发者可以根据自己的需求,生成这个数组,然后传递给组件。

四、总结

本文介绍了一款基于Vue.js的仿企查查天眼查知识产权标准信息列表组件:cc-bzListView。该组件采用组件化的开发方式,使得开发者可以单独开发、单独维护,并且可以随意组合。开发者可以根据自己的需求,对组件进行自定义扩展,实现更多的功能。通过使用这个组件,开发者可以快速地构建出一个美观、易用的信息列表界面,提高了开发的效率和质量。

标签:Vue,天眼,开发,开发者,组件,123456,仿企
From: https://www.cnblogs.com/ccVue/p/17673997.html

相关文章

  • 2、Vue中安装element-plus
    1、在项目终端命令行中输入:pnpminstallelement-plus--save 2、项目中导入elementimportElementPlusfrom'element-plus'import'element-plus/dist/index.css' 3、使用element组件 ......
  • vue项目中全局引入cass(scss)变量和sass(scss) mixin
    1、使用场景variable.scss文件样例//颜色定义规范$color-background:#222;mixin.scss文件样例//背景图片@mixinbg-image($url){background-image:url($url+"@2x.png");@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background-i......
  • vue --version 运行出现throw new ERR_SYSTEM_ERROR 错误
    (1)根据错误提示信息,找到出错入口文件:E:\SVN\zlpt\node_modules\node-ipc\entities\Defaults.js然后指定位置添加如下代码即可:constos=require('os');os.hostname=()=>"localhost";......
  • Vue的使用
    Vue是什么:虚拟DOM重用模板的时候在Vue中存在虚拟DOM真实的DOM(我们眼睛能看到的部分)虚拟DOM的虚拟出现是为了更好的去重用我们的DOM模块化编程将一个页面的某一部分抽取出来变成一个独立的代码块,独立代码块可以是HTML、JS、CSS模板容器<!--准备一个模板容器--><divid="div01">......
  • Vue项目打包,部署到apache服务器
    初学veu,实战项目上线服务器,查遍全网和问遍身边大佬,终于经过我不断地探索,上线成功啦,现在我就为大家梳理一下思路。首先,我们先看一下官网链接:VueCLI部署.,参数配置:publicPath.,VueRouter:HTML5History模式1、步骤1、项目配置2、打包项目,命令:npmrunbuild3、将生成的dist文件......
  • 基于 Python 和 Vue 的在线评测系统
    基于Docker,真正一键部署前后端分离,模块化编程,微服务ACM/OI两种比赛模式、实时/非实时评判任意选择丰富的可视化图表,一图胜千言支持TemplateProblem,可以添加函数题甚至填空题更细致的权限划分,超级管理员和普通管理员各司其职多语言支持:C, C++, Java, Python2, Pyth......
  • 深入了解Vue.js:现代化的前端开发框架
    标题:深入了解Vue.js:现代化的前端开发框架Vue.js,或简称Vue,是一款备受前端开发者喜爱的现代化JavaScript框架。它的出现改变了前端开发的方式,使开发者能够更轻松地构建交互性强、响应迅速的Web应用程序。本文将深入探讨Vue.js的各个方面,从其核心概念到生态系统,让您对这个强大的框架有......
  • VUE中的 TreeSelect使用
    vue-treeselect的组件使用 一先通过npm安装vue-treeselectnpmintall--save@riophae/vue-treeselect  二页面中引入,声明组件 三页面使用 然后动态绑定data(数据) 这个Id和Label还有children都是可以修改的但是注意!一定要和后端定义的值对的上!最终效果......
  • vue项目中package.json的个人见解
    一、背景介绍Vue.js是一种流行的JavaScript前端框架,它以简洁的语法、灵活性和可扩展性而受到开发者的青睐。在Vue项目中,package.json文件是一个非常重要的配置文件,它管理着项目的依赖关系、脚本命令、版本信息等。本文将探讨package.json在Vue项目中的重要性以及个人的使用经验。二......
  • 关于处理 vue data中对象或数组中响应式数据的注意点
    vue2中针对对象中的响应式数据,如果要想修改他们,只能通过监听的特性实现。不能直接赋值。在vue2源码中,计算属性和watch的实现方式是一样的,都具有监听响应式对象或数组中的数据的功能。区别就是,计算属性具有缓存机制。除此之外,还可以直接使用this.$set(obj,key:String,value......