popover

vue+element-ui实现优雅的emoji表情框

岁酱吖の 提交于 2020-08-20 00:45:00
终于把表情包的功能实现了😁,网上很多用本地图库、雪碧图之类的,愣是没找到几个适合我的解决方案,于是从 amio/emoji.json 上面找了一个JSON文件,然后简单实现了自己聊天系统上面的一个默认表情功能。 文章目录 引入JSON文件 Code template css script 效果 JSON文件 参考文章与资源 引入JSON文件 const appData = require ( "../static/utils/emoji.json" ) ; Code template 表情框组件,通过slot插槽按钮触发显示;输入框是一个textarea,我们要把点击选择的表情插入到textarea光标对应的位置之后。 < div class = "chatIcon" > < el - popover placement = "top-start" width = "400" trigger = "click" class = "emoBox" > < div class = "emotionList" > < a href = "javascript:void(0);" @click = "getEmo(index)" v - for = "(item,index) in faceList" : key = "index" class = "emotionItem" > { {

VUE实战

北城以北 提交于 2020-08-10 02:34:24
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.vue' import router from './router/index.js' 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/>' }) View Code index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Content from

Avoid popover adapting to fullscreen in horizontally compact environment

ぃ、小莉子 提交于 2020-07-21 06:03:39
问题 According to documentation, In a horizontally compact environment, popovers adapt to the UIModalPresentationOverFullScreen presentation style by default. See below image. In compact environment, popover appear from bottom and animate to top until it covers the entire screen. Is it possible to override this behaviour and have the popover only covering certain height of the screen as shown below? Following code demonstrate the default behaviour of popover adapting to FullScreen presentation

Avoid popover adapting to fullscreen in horizontally compact environment

狂风中的少年 提交于 2020-07-21 06:01:27
问题 According to documentation, In a horizontally compact environment, popovers adapt to the UIModalPresentationOverFullScreen presentation style by default. See below image. In compact environment, popover appear from bottom and animate to top until it covers the entire screen. Is it possible to override this behaviour and have the popover only covering certain height of the screen as shown below? Following code demonstrate the default behaviour of popover adapting to FullScreen presentation

Ref null inside Popover

眉间皱痕 提交于 2020-07-10 08:49:25
问题 I am trying to autofocus an input element on opening of a popover. Here is the sandbox for it: https://codesandbox.io/s/green-bash-x6bj4?file=/src/App.js Issue here is that the current property is always null on ref. Is this a case where forwardRef might help? I am not much aware of it so posting it. Any help is much appreciated. 回答1: No need to use a ref for that, just add autoFocus to your input: <input autoFocus placeholder="search" /> 回答2: Since you control the open via state, which is