first
This commit is contained in:
1
node_modules/vant/es/image/index.css
generated
vendored
Normal file
1
node_modules/vant/es/image/index.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:50%}.van-image--round img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#969799;font-size:14px;background-color:#f7f8fa}.van-image__loading-icon{color:#dcdee0;font-size:32px}.van-image__error-icon{color:#dcdee0;font-size:32px}
|
189
node_modules/vant/es/image/index.js
generated
vendored
Normal file
189
node_modules/vant/es/image/index.js
generated
vendored
Normal file
@ -0,0 +1,189 @@
|
||||
import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
|
||||
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
|
||||
import { createNamespace, isDef, addUnit, inBrowser } from '../utils';
|
||||
import Icon from '../icon';
|
||||
|
||||
var _createNamespace = createNamespace('image'),
|
||||
createComponent = _createNamespace[0],
|
||||
bem = _createNamespace[1];
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
src: String,
|
||||
fit: String,
|
||||
alt: String,
|
||||
round: Boolean,
|
||||
width: [Number, String],
|
||||
height: [Number, String],
|
||||
radius: [Number, String],
|
||||
lazyLoad: Boolean,
|
||||
iconPrefix: String,
|
||||
showError: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
errorIcon: {
|
||||
type: String,
|
||||
default: 'photo-fail'
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: 'photo'
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
loading: true,
|
||||
error: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
src: function src() {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style: function style() {
|
||||
var style = {};
|
||||
|
||||
if (isDef(this.width)) {
|
||||
style.width = addUnit(this.width);
|
||||
}
|
||||
|
||||
if (isDef(this.height)) {
|
||||
style.height = addUnit(this.height);
|
||||
}
|
||||
|
||||
if (isDef(this.radius)) {
|
||||
style.overflow = 'hidden';
|
||||
style.borderRadius = addUnit(this.radius);
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
var $Lazyload = this.$Lazyload;
|
||||
|
||||
if ($Lazyload && inBrowser) {
|
||||
$Lazyload.$on('loaded', this.onLazyLoaded);
|
||||
$Lazyload.$on('error', this.onLazyLoadError);
|
||||
}
|
||||
},
|
||||
beforeDestroy: function beforeDestroy() {
|
||||
var $Lazyload = this.$Lazyload;
|
||||
|
||||
if ($Lazyload) {
|
||||
$Lazyload.$off('loaded', this.onLazyLoaded);
|
||||
$Lazyload.$off('error', this.onLazyLoadError);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoad: function onLoad(event) {
|
||||
this.loading = false;
|
||||
this.$emit('load', event);
|
||||
},
|
||||
onLazyLoaded: function onLazyLoaded(_ref) {
|
||||
var el = _ref.el;
|
||||
|
||||
if (el === this.$refs.image && this.loading) {
|
||||
this.onLoad();
|
||||
}
|
||||
},
|
||||
onLazyLoadError: function onLazyLoadError(_ref2) {
|
||||
var el = _ref2.el;
|
||||
|
||||
if (el === this.$refs.image && !this.error) {
|
||||
this.onError();
|
||||
}
|
||||
},
|
||||
onError: function onError(event) {
|
||||
this.error = true;
|
||||
this.loading = false;
|
||||
this.$emit('error', event);
|
||||
},
|
||||
onClick: function onClick(event) {
|
||||
this.$emit('click', event);
|
||||
},
|
||||
genPlaceholder: function genPlaceholder() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.loading && this.showLoading) {
|
||||
return h("div", {
|
||||
"class": bem('loading')
|
||||
}, [this.slots('loading') || h(Icon, {
|
||||
"attrs": {
|
||||
"name": this.loadingIcon,
|
||||
"classPrefix": this.iconPrefix
|
||||
},
|
||||
"class": bem('loading-icon')
|
||||
})]);
|
||||
}
|
||||
|
||||
if (this.error && this.showError) {
|
||||
return h("div", {
|
||||
"class": bem('error')
|
||||
}, [this.slots('error') || h(Icon, {
|
||||
"attrs": {
|
||||
"name": this.errorIcon,
|
||||
"classPrefix": this.iconPrefix
|
||||
},
|
||||
"class": bem('error-icon')
|
||||
})]);
|
||||
}
|
||||
},
|
||||
genImage: function genImage() {
|
||||
var h = this.$createElement;
|
||||
var imgData = {
|
||||
class: bem('img'),
|
||||
attrs: {
|
||||
alt: this.alt
|
||||
},
|
||||
style: {
|
||||
objectFit: this.fit
|
||||
}
|
||||
};
|
||||
|
||||
if (this.error) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.lazyLoad) {
|
||||
return h("img", _mergeJSXProps([{
|
||||
"ref": "image",
|
||||
"directives": [{
|
||||
name: "lazy",
|
||||
value: this.src
|
||||
}]
|
||||
}, imgData]));
|
||||
}
|
||||
|
||||
return h("img", _mergeJSXProps2([{
|
||||
"attrs": {
|
||||
"src": this.src
|
||||
},
|
||||
"on": {
|
||||
"load": this.onLoad,
|
||||
"error": this.onError
|
||||
}
|
||||
}, imgData]));
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var h = arguments[0];
|
||||
return h("div", {
|
||||
"class": bem({
|
||||
round: this.round
|
||||
}),
|
||||
"style": this.style,
|
||||
"on": {
|
||||
"click": this.onClick
|
||||
}
|
||||
}, [this.genImage(), this.genPlaceholder(), this.slots()]);
|
||||
}
|
||||
});
|
47
node_modules/vant/es/image/index.less
generated
vendored
Normal file
47
node_modules/vant/es/image/index.less
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&--round {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__img,
|
||||
&__error,
|
||||
&__loading {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__error,
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @image-placeholder-text-color;
|
||||
font-size: @image-placeholder-font-size;
|
||||
background-color: @image-placeholder-background-color;
|
||||
}
|
||||
|
||||
&__loading-icon {
|
||||
color: @image-loading-icon-color;
|
||||
font-size: @image-loading-icon-size;
|
||||
}
|
||||
|
||||
&__error-icon {
|
||||
color: @image-error-icon-color;
|
||||
font-size: @image-error-icon-size;
|
||||
}
|
||||
}
|
4
node_modules/vant/es/image/style/index.js
generated
vendored
Normal file
4
node_modules/vant/es/image/style/index.js
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import '../../style/base.css';
|
||||
import '../../info/index.css';
|
||||
import '../../icon/index.css';
|
||||
import '../index.css';
|
4
node_modules/vant/es/image/style/less.js
generated
vendored
Normal file
4
node_modules/vant/es/image/style/less.js
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import '../../style/base.less';
|
||||
import '../../info/index.less';
|
||||
import '../../icon/index.less';
|
||||
import '../index.less';
|
Reference in New Issue
Block a user