html:
- <div class="divInput" v-close>
- <div class="input" @click="opensort">
- <input v-model="sortvalue" type="text" placeholder="分类" />
- <vicon :type="'triangle'" class="topimg" />
- </div>
- <div class="list" v-show="show">
- <ul>
- <li
- @click="getvalue(index, sortitem)"
- v-for="(sortitem, index) in tableData"
- :key="sortitem.index"
- >
- {{ sortitem.name }}
- </li>
- </ul>
- </div>
- </div>
- View Code
JS:
- <script>
- export default {
- name: "docselect",
- data() {
- return {
- tableData: [
- {
- name: "专业论文"
- },
- {
- name: "植物设计"
- },
- {
- name: "景观设计"
- },
- {
- name: "规划研究"
- },
- {
- name: "生态理念"
- },
- {
- name: "施工技术"
- },
- {
- name: "工程管理"
- }
- ],
- show: false,
- sortvalue: ""
- };
- },
- methods: {
- opensort() {
- this.show = !this.show;
- },
- getvalue(index, sortitem) {
- this.sortvalue = sortitem.name;
- this.show = false;
- }
- },
- components: {
- vicon
- }
- };
- </script>
- View Code
CSS:
- <style>
- .divInput {
- width: 78px;
- height: auto;
- /* margin-left: 48px; */
- display: inline-block;
- }
- ul li {
- list-style: none;
- }
- .input {
- width: 74px;
- height: 20px;
- line-height: 40px;
- padding-left: 5px;
- /* border: 1px solid #cccccc; */
- position: relative;
- cursor: pointer;
- }
- .input input:focus {
- outline: 0 !important;
- }
- .input input {
- border: none;
- outline: none;
- width: 55px;
- float: left;
- margin: auto;
- cursor: pointer;
- margin-top: 2px;
- }
- .input img {
- position: absolute;
- right: 34px;
- top: 48%;
- }
- .list {
- background: #ffffff;
- width: 72px;
- overflow: hidden;
- position: absolute;
- box-shadow: 0px 3px 6px rgba(191, 191, 191, 1);
- opacity: 1;
- z-index: 1;
- display: block;
- }
- .list.close {
- display: none;
- }
- .topimg {
- width: 18px;
- height: 15px;
- float: left;
- }
- .list ul li {
- height: 30px;
- cursor: pointer;
- margin: 0px 4px 0px -35px;
- font-size: 12px;
- }
- .list ul li:hover {
- background-color: #e6e6e6;
- }
- </style>
- View Code
然后发现下拉框点击空白处不关闭, 然后在加上一个事件
- // 点击空白处关闭下拉框的 div 事件
- directives: {
- close: {
- inserted(el, binding, vnode) {
- Windows.onclick = function(e) {
- if (!el.contains(e.target)) {
- vnode.context.show = false;
- }
- };
- }
- }
- },
注意: 这个事件和 data 是同级的
效果图:
来源: http://www.bubuko.com/infodetail-3339612.html